這篇文章主要介紹了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中文網其他相關文章!