So richten Sie die Popup-Ebene in yii2 ein

Modal ist auch ein modales Fenster, das für Laien ein Popup-Fenster ist. Es ist ein Bootstrap-JS-Plug-In und der Effekt ist sehr gut.

Es ist nicht nötig, mehr darüber zu sagen, warum Sie während des Entwicklungsprozesses einer Website modale Fenster verwenden sollten. Ich glaube Ihnen nicht, wenn Sie sagen, dass Sie noch nie js-Popup-Fenster verwendet haben! Ein gutes Popup-Fenster vermittelt den Menschen nicht nur ein Gefühl von Schönheit, sondern verbessert auch unsere Entwicklungseffizienz und sorgt dafür, dass wir uns sogar besser fühlen! (Empfohlenes Lernen: YII-Framework )

Sehen wir uns an, wie man MODAL in yii2 verwendet.

Wenn wir beispielsweise zuvor Daten hinzugefügt haben, klicken wir normalerweise auf die Schaltfläche, um zur Seite „Hinzufügen“ zu springen, und springen dann nach dem Speichern zur Listenseite.

Jetzt möchten wir Daten im Popup-Fenster der aktuellen Seite hinzufügen, wenn wir auf die Schaltfläche „Hinzufügen“ klicken. Sehen wir uns die spezifische Implementierung an.

1. Verwenden Sie yiibootstrapModal; 2. Erstellen Sie eine Schaltfläche, um die Anzeige des Modals anzupassen3. Fügen Sie der Schaltfläche ein Klickereignis hinzu

echo Html::a('创建', '#', [
    'id' => 'create',
    'data-toggle' => 'modal',
    'data-target' => '#create-modal',
    'class' => 'btn btn-success',
]);

4 Wir haben im dritten Schritt gesehen, dass durch Klicken auf die Schaltfläche [Erstellen] die Anforderungsoperationsmethode wie folgt geändert wird:

$requestUrl = Url::toRoute('create');
$js = <<<JS
    $(document).on(&#39;click&#39;, &#39;#create&#39;, function () {
        $.get(&#39;{$requestUrl}&#39;, {},
            function (data) {
                $(&#39;.modal-body&#39;).html(data);
            }  
        );
    });
JS;
$this->registerJs($js);

5 Klicken Sie auf die Schaltfläche [Erstellen], Sie sehen das modale Popup-Fenster, der Screenshot sieht wie folgt aus.

Das obige ist der detaillierte Inhalt vonSo richten Sie die Popup-Ebene in yii2 ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!