這篇文章主要介紹了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([
'id' => 'create-modal',
'header' => '<h4 class="modal-title">创建</h4>',
'footer' => '<a href="#" class="btn btn-primary" data-dismiss="modal">Close</a>',
]);
$requestUrl = Url::toRoute('create');
$js = <<<JS
$.get('{$requestUrl}', {},
function (data) {
$('.modal-body').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(['index']);
} else {
return $this->renderAjax('create', [
'model' => $model,
]);
}
}這時候我們點選按鈕[建立]，會看到modal彈跳窗，截圖如下。
有同學可能要說，這個頁面沒必要非同步載入過來。確實，你也可以直接在頁面上echo $this->renderAjax();，不過需要提醒的是，該操作記得修改表單提交的action哦。
關於modal的使用，這裡有兩點需要提醒大家：
在控制元素（例如按鈕或連結）上設定屬性data-toggle="modal"，同時設定data- target="#identifier" 或href="#identifier" 來指定要切換的特定的模態框（帶有id="identifier"）
以上，我們在yii2中實現了modal的基本使用。
相關推薦：
以上是Yii2中如何使用model彈跳窗(基本使用)的詳細內容。更多資訊請關注PHP中文網其他相關文章！
