So verwenden Sie das Modell-Popup-Fenster in Yii2 (grundlegende Verwendung)

In diesem Artikel wird hauptsächlich die Verwendung modaler Popup-Fenster in Yii2 und zugehörige grundlegende Informationen vorgestellt. Er ist sehr gut und hat Referenzwert.

Modal ist auch ein modales Fenster . Laienhaft ausgedrückt handelt es sich um ein Popup-Fenster. Es ist ein Bootstrap-JS-Plug-In und der Effekt ist sehr gut.

Es besteht keine Notwendigkeit zu erklären, 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!

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 hoffen wir, dass beim Klicken auf die Schaltfläche „Hinzufügen“ Daten zum Popup-Fenster auf der aktuellen Seite hinzugefügt werden. Siehe die spezifische Implementierung.

1、use yii\bootstrap\Modal;

2、创建一个按钮，用于调modal的显示

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

3、创建modal

<?php 
Modal::begin([
&#39;id&#39; => &#39;create-modal&#39;,
&#39;header&#39; => &#39;<h4 class="modal-title">创建</h4>&#39;,
&#39;footer&#39; => &#39;<a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>&#39;,
]); 
$requestUrl = Url::toRoute(&#39;create&#39;);
$js = <<<JS
$.get(&#39;{$requestUrl}&#39;, {},
function (data) {
$(&#39;.modal-body&#39;).html(data);
} 
);
JS;
$this->registerJs($js);
Modal::end(); 
?>

4、修改我们的create操作如下

public function actionCreate()
{
$model = new Test();
if ($model->load(Yii::$app->request->post()) && $model->save()) {
return $this->redirect([&#39;index&#39;]);
} else {
return $this->renderAjax(&#39;create&#39;, [
&#39;model&#39; => $model,
]);
}
}

Wenn wir zu diesem Zeitpunkt auf die Schaltfläche [Erstellen] klicken, wird das modale Popup-Fenster angezeigt. Der Screenshot sieht wie folgt aus.

Einige Schüler sagen möglicherweise, dass es nicht nötig ist, diese Seite asynchron zu laden. Tatsächlich können Sie $this->renderAjax(); auch direkt auf der Seite wiedergeben, aber Sie müssen daran erinnert werden, dass Sie für diesen Vorgang daran denken, die vom Formular übermittelte Aktion zu ändern.

Bezüglich der Verwendung von Modal müssen hier zwei Punkte beachtet werden:

Setzen Sie das Attribut data-toggle="modal" auf dem Steuerelement (z. B. einer Schaltfläche oder einem Link). ) und setzen Sie data-target="#identifier" oder href="#identifier", um das spezifische Modalfeld anzugeben, das umgeschaltet werden soll (mit id="identifier")

Oben haben wir die grundlegende Verwendung implementiert von modal in yii2 .

Verwandte Empfehlungen:

Yii implementiert zwei Methoden zum Hinzufügen von Standardwerten zu Modellen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Modell-Popup-Fenster in Yii2 (grundlegende Verwendung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!