Wyskakujące okno bootstrap modal Przykład

W pliku views/layout/main.php na końcu przed </body>

<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>

Wywołanie okna modal następuje po kliknięciu w przycisk:

<button id="mod3" class="btn btn-primary">Odzyskaj hasło</button> 

W widoku na końcu:

<?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") 
            });
    }) ;'
);

otwiera okno modal i ładuje do niego stronę zgodnie z odnośnikiem
W widoku odnośnik:

<?= Html::a('Tekst odnośnika', ['/controller/akcja'], ['class' => 'popupModal']) > 

W widoku na końcu :

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

});");

<?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'));
   });
");
?>

Ustalenie wysokości okna na 70% i włączenie suwaka przewijania

    $('.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'));
   });

Przechwycenie zdarzenia onClick w oknie modala.

$(document).on('click', '#add', function(event){
    alert('OK'); 

 });

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

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

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.

<?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() ?>

Po wypełnieniu formularza w modalu i zapisaniu po cofnieciu strony pojawia sie formularz na pełnej stronie. W kontrolerze:

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'));
      }
 
 
       ...
 }