Yii2中如何使用model彈跳窗(基本使用)

這篇文章主要介紹了Yii2中如何使用modal彈跳窗及基本使用的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下

Modal也即是模態窗，通俗的說就是彈跳窗戶。是一款bootstrap的js插件，使用效果也是非常好。

為什麼要用modal就不用多說了，一個網站，在開發過程中你說你沒用過js彈跳窗我都不信！好的彈跳窗不只給人美感，也會讓我們開發效率提高，連心情也會舒暢！

我們來看看在yii2中如何使用modal。

例如我們之前新增資料的時候，通常會點選按鈕跳到新增頁面，儲存後再跳到清單頁。

現在我們希望點擊新增按鈕的時候，在目前頁面彈出視窗新增數據，看具體實現。

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 id="创建">创建</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,
]);
}
}

這時候我們點選按鈕[建立]，會看到modal彈跳窗，截圖如下。

有同學可能要說，這個頁面沒必要非同步載入過來。確實，你也可以直接在頁面上echo $this->renderAjax();，不過需要提醒的是，該操作記得修改表單提交的action哦。

關於modal的使用，這裡有兩點需要提醒大家：

在控制元素（例如按鈕或連結）上設定屬性data-toggle="modal"，同時設定data- target="#identifier" 或href="#identifier" 來指定要切換的特定的模態框（帶有id="identifier"）

以上，我們在yii2中實現了modal的基本使用。

相關推薦：

yii實作model新增預設值的兩種方法

以上是Yii2中如何使用model彈跳窗(基本使用)的詳細內容。更多資訊請關注PHP中文網其他相關文章！