Yii2中如何使用modal彈窗(基本使用)
Modal也即是模態(tài)窗,通俗的說就是彈窗。是一款bootstrap的js插件,使用效果也是非常好。
為什么要使用modal就不必多說了,一個(gè)網(wǎng)站,在開發(fā)過程中你說你沒用過js彈窗我都不信!好的彈窗不僅僅給人以美感,也會(huì)讓我們開發(fā)效率提高,甚至心情也會(huì)舒暢!
我們看看在yii2中如何使用modal。
比如我們之前添加數(shù)據(jù)的時(shí)候,通常情況下會(huì)點(diǎn)擊按鈕跳轉(zhuǎn)到添加頁面,保存后再跳轉(zhuǎn)到列表頁。
現(xiàn)在我們希望點(diǎn)擊添加按鈕的時(shí)候,在當(dāng)前頁面彈窗添加數(shù)據(jù),看具體實(shí)現(xiàn)。
1、use yii\bootstrap\Modal; 2、創(chuàng)建一個(gè)按鈕,用于調(diào)modal的顯示 echo Html::a('創(chuàng)建', '#', [ 'id' => 'create', 'data-toggle' => 'modal', 'data-target' => '#create-modal', 'class' => 'btn btn-success', ]); 3、創(chuàng)建modal <?php Modal::begin([ 'id' => 'create-modal', 'header' => '<h4 class="modal-title">創(chuàng)建</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, ]); } }
這個(gè)時(shí)候我們點(diǎn)擊按鈕[創(chuàng)建],會(huì)看到modal彈窗,截圖如下。
有同學(xué)可能要說,這個(gè)頁面沒必要異步加載過來。確實(shí),你也可以直接在頁面上echo $this->renderAjax();,不過需要提醒的是,該操作記得修改表單提交的action哦。
關(guān)于modal的使用,此處有兩點(diǎn)需要提醒大家:
在控制元素(比如按鈕或者鏈接)上設(shè)置屬性 data-toggle="modal",同時(shí)設(shè)置 data-target="#identifier" 或 href="#identifier" 來指定要切換的特定的模態(tài)框(帶有 id="identifier")
以上,我們?cè)趛ii2中實(shí)現(xiàn)了modal的基本使用。
- Yii2.0預(yù)定義的別名功能小結(jié)
- Yii2中使用join、joinwith多表關(guān)聯(lián)查詢
- Yii2 ActiveRecord多表關(guān)聯(lián)及多表關(guān)聯(lián)搜索的實(shí)現(xiàn)
- Yii2 rbac權(quán)限控制之rule教程詳解
- Yii2使用自帶的UploadedFile實(shí)現(xiàn)的文件上傳
- Yii2組件之多圖上傳插件FileInput的詳細(xì)使用教程
- yii2 modal彈窗之ActiveForm ajax表單異步驗(yàn)證
- yii2中結(jié)合gridview如何使用modal彈窗實(shí)例代碼詳解
- yii2分頁之實(shí)現(xiàn)跳轉(zhuǎn)到具體某頁的實(shí)例代碼
- yii2實(shí)現(xiàn)根據(jù)時(shí)間搜索的方法
- Yii2框架使用計(jì)劃任務(wù)的方法
- Yii2分頁的使用及其擴(kuò)展方法詳解
- Yii2如何批量添加數(shù)據(jù)
- Yii2 RESTful中api的使用及開發(fā)實(shí)例詳解
相關(guān)文章
PHP環(huán)境搭建(php+Apache+mysql)
這篇文章主要為大家詳細(xì)介紹了PHP環(huán)境搭建,包括php、Apache、mysql環(huán)境安裝,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11PHP+jQuery 注冊(cè)模塊的改進(jìn)(一):驗(yàn)證碼存入SESSION
本文主要是對(duì)上一篇文章模進(jìn)行改進(jìn),把驗(yàn)證碼寫入SESSION而不是把驗(yàn)證碼的文字返回客戶端的隱藏域,否則驗(yàn)證碼的意義就不復(fù)存在啦2014-10-10微信小程序 消息推送php服務(wù)器驗(yàn)證實(shí)例詳解
這篇文章主要介紹了微信小程序 消息推送php服務(wù)器驗(yàn)證實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-03-03使用PHP?Smarty處理表單數(shù)據(jù)的方法
這篇文章主要介紹了如何使用PHP?Smarty處理表單數(shù)據(jù),首先需要下載Smarty庫并將其解壓到你的項(xiàng)目,下面通過本文結(jié)合實(shí)例代碼給大家講解的非常詳細(xì),需要的朋友可以參考下2023-08-08CentOS 7.2 下編譯安裝PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法詳解(mini版
這篇文章主要介紹了CentOS 7.2 mini版本下編譯安裝PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09php切割頁面div內(nèi)容的實(shí)現(xiàn)代碼分享
今天在百度知道看到一個(gè)關(guān)于php獲取DIV內(nèi)容的問題,做了一晚,終于是做出來了2012-07-07thinkphp微信開之安全模式消息加密解密不成功的解決辦法
使用thinkphp官方的WeChat包,使用不同模式可以成功,但是安全模式就是不行,現(xiàn)將分析解決結(jié)果做下記錄,對(duì)thinkphp加密解密相關(guān)知識(shí)感興趣的朋友參考下2015-12-12php開發(fā)最強(qiáng)大的IDE編輯的phpstorm 2020.2配置Xdebug調(diào)試的詳細(xì)教程
這篇文章主要介紹了php開發(fā)最強(qiáng)大的IDE編輯的phpstorm 2020.2配置Xdebug調(diào)試,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-08php+ajax注冊(cè)實(shí)時(shí)驗(yàn)證功能
我們?cè)诰W(wǎng)站上面注冊(cè)時(shí),在輸入用戶名時(shí),首先要進(jìn)行無刷新驗(yàn)證,這篇文章主要為大家詳細(xì)介紹了php+ajax注冊(cè)實(shí)時(shí)驗(yàn)證功能,感興趣的小伙伴們可以參考一下2016-07-07