Beispiel-Tutorial zur Verwendung des Bootstrap-Modal+Gridview-Popup-Box-Effekts

In diesem Artikel wird hauptsächlich der durch Bootstrap Modal + Gridview erzielte Popup-Box-Effekt vorgestellt. Klicken Sie auf „Aktualisieren“ in der Rasteransicht, um das Formular zum Ausfüllen von Informationen anzuzeigen. Interessierte Freunde können darauf verweisen >Das Projekt muss in den Gridview-Formularinformationen auf „Aktualisieren“ klicken, um das Formular für den Betrieb ohne Springen aufzurufen.

1. Fügen Sie der Girdview eine Aktualisierungsschaltfläche hinzu, um das modale Popup-Fenster aufzurufen

2. Modalen Popup-Stil im Kopf der Rasteransicht erstellen

'buttons' => [
  'update' => function ($url, $model, $key) {
       return Html::a(&#39;<span class="glyphicon glyphicon-pencil"></span>&#39;, &#39;#&#39;, [
          &#39;data-toggle&#39; => &#39;modal&#39;,
          &#39;data-target&#39; => &#39;#update-modal&#39;,
          &#39;class&#39; => &#39;data-update&#39;,
          &#39;data-id&#39; => $key,
          &#39;title&#39;=>&#39;更改状态&#39;,
          ]);
        },
      ],

3 🎜>

<?php
use yii\bootstrap\Modal;//模态弹出框
Modal::begin([
  &#39;id&#39; => &#39;update-modal&#39;,
  &#39;header&#39; => &#39;<h4 class="modal-title">更改状态</h4>&#39;,
  &#39;footer&#39; => &#39;<a href="#" rel="external nofollow" class="btn btn-primary" data-dismiss="modal">Close</a>&#39;,
]); 
Modal::end();
?>

4. Controller-Update-Methode

<?php    
$requestUpdateUrl = Url::toRoute(&#39;update&#39;);
$updateJs = <<<JS
  $(&#39;.data-update&#39;).on(&#39;click&#39;, function () {
    $.get(&#39;{$requestUpdateUrl}&#39;, { id: $(this).closest(&#39;tr&#39;).data(&#39;key&#39;) },
      function (data) {
        $(&#39;.modal-body&#39;).html(data);
      } 
    );
  });
JS;
$this->registerJs($updateJs); 
?>

Das obige ist der detaillierte Inhalt vonBeispiel-Tutorial zur Verwendung des Bootstrap-Modal+Gridview-Popup-Box-Effekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!