====== Bootstrap modal ======

----
====== Okno modal ======
Wyskakujące okno bootstrap modal
Przykład
     
W pliku views/layout/main.php na końcu przed </body>
<code html>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" 
                            aria-label="Close">
                  <span aria-hidden="true">×</span></button>
                        <h4 class="modal-title bg-primary" id="myModalLabel" 
                               style="padding:10px;margin-right:20px"></h4>
                    </div>
                    <div class="modal-body"></div>
                    <div class="modal-footer">  </div>
                </div>
            </div>
 </div>
</code>
==== Kliknięcie w przycisk  ====
Wywołanie okna //modal// następuje po kliknięciu w przycisk:
<code html>
<button id="mod3" class="btn btn-primary">Odzyskaj hasło</button> 
</code>
W widoku na końcu:
<code php>
<?php    
$this->registerJs(
     '$(document).ready(function(){
            $("#mod3").on("click",function(){
                $(".modal-body").load("/site/request-password-reset",function(){
                     $("#myModal").modal({show:true});
                 });
                $("#myModalLabel").html("Odzyskiwanie hasła") 
            });
    }) ;'
);
</code>

==== Kliknięcie w odnośnik ====
 
otwiera okno modal i ładuje do niego stronę zgodnie z odnośnikiem\\
W widoku odnośnik:
<code>
<?= Html::a('Tekst odnośnika', ['/controller/akcja'], ['class' => 'popupModal']) > 
</code>
=== Bootstrap3 ===

W widoku na końcu :
<code>
<?php    
$this->registerJs("$(function() {
   $('.popupModal').click(function(e) {
     e.preventDefault();
     $('#myModalLabel').html('Tytuł okna') ;
     $('#myModal').modal('show').find('.modal-body')
     .load($(this).attr('href'));
   });

});");
</code>
=== Bootstrap 4 ===

<code>
<?php 
$this->registerJs("
$('.popupModal').click(function(e) {
     e.preventDefault();
     $('.modal-dialog').addClass('modal-lg');
     $('.modal-title').html('Tytuł') ;
     $('#myModal').modal('show').find('.modal-body')
     .load($(this).attr('href'));
   });
");
?>
</code>
----
===== Ograniczenie wysokości okna =====
Ustalenie wysokości okna na 70% i włączenie suwaka przewijania
<code>

    $('.popupModal').click(function(e) {
      e.preventDefault();
      $('.modal-dialog').addClass('modal-lg');
      $('.modal-title').html('Tytuł) ;
      $('.modal .modal-body').css('overflow-y', 'auto'); 
      $('.modal .modal-body').css('max-height', $(window).height() * 0.7);
      $('#myModal').modal('show').find('.modal-body').load($(this).attr('href'));
   });
</code>
===== Click w modalu =====

Przechwycenie zdarzenia **onClick** w oknie modala.
<code>
$(document).on('click', '#add', function(event){
    alert('OK'); 

 });
</code>

----
===== Rozmiar okna =====

Szerokość wyskakującego okna modal (bootstrap)\\
ustala się przez modyfikację CSS

<code php>
<?php
$('.modal-dialog').css('max-width','40%');
</code>

----
===== Formularz w modalu =====

Aby w prawidłowo obsługiwać formularz w wyskakującym oknie (bootstrap modal)
należy korzystać z technologii Ajax.
Technologię Ajax obsługuje widget Pjax.
<code php>
<?php yii\widgets\Pjax::begin(['id' => 'log-in']) ?>
   <?php $form = ActiveForm::begin([
          'id' => 'login-form',
     'options' => ['data-pjax' => true]
]); ?>

...

   <?php ActiveForm::end(); ?>
<?php yii\widgets\Pjax::end() ?>
</code>
====== Zabezpieczenie przed otwarciem formularza jesli nie Ajax ======
Po wypełnieniu formularza w modalu i zapisaniu po cofnieciu strony pojawia sie formularz na pełnej stronie.  
W kontrolerze:
<code php>
public function actionUpdate($id) {
     $request = Yii::$app->request;
     if (!$request->isAjax) {
       Yii::$app->session->setFlash('danger', 'Proszę nie używać przycisku <- Wstecz w przeglądarce !!!');
       return $this->redirect(Url::previous('users'));
      }
      
       
       ...
 }
</code>