Modal也即是模態(tài)窗，通俗的說就是彈窗。是一款bootstrap的JS插件，使用效果也是非常好。
為什么要使用modal就不必多說了，一個網(wǎng)站，在開發(fā)過程中你說你沒用過js彈窗我都不信！好的彈窗不僅僅給人以美感，也會讓我們開發(fā)效率提高，甚至心情也會舒暢！? ? ? ? ? ? ? ? ? ? ? ? ? ? （推薦學習：yii框架）
我們看看在YII2中如何使用modal。
比如我們之前添加數(shù)據(jù)的時候，通常情況下會點擊按鈕跳轉(zhuǎn)到添加頁面，保存后再跳轉(zhuǎn)到列表頁。
現(xiàn)在我們希望點擊添加按鈕的時候，在當前頁面彈窗添加數(shù)據(jù)，看具體實現(xiàn)。
1、use yiibootstrapModal; 2、創(chuàng)建一個按鈕，用于調(diào)modal的顯示
echo?Html::a('創(chuàng)建',?'#',?[ ????'id'?=>?'create', ????'data-toggle'?=>?'modal', ????'data-target'?=>?'#create-modal', ????'class'?=>?'btn?btn-success', ]);
3、給按鈕添加點擊事件
$requestUrl?=?Url::toRoute('create'); $js?=?registerJs($js);
4、我們在第三步中看到，點擊[創(chuàng)建]按鈕會異步請求數(shù)據(jù)，我們修改請求操作方法如下
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, ????????]); ????} }
5、這個時候我們點擊按鈕[創(chuàng)建]，會看到modal彈窗，截圖如下。
? 版權(quán)聲明
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載。
THE END
