做者:白狼 出處:http://www.manks.top/yii2_modal_baseuse.html 本文版權歸做者,歡迎轉載,但未經做者贊成必須保留此段聲明,且在文章頁面明顯位置給出原文鏈接,不然保留追究法律責任的權利。php
Modal也便是模態窗,通俗的說就是彈窗。是一款bootstrap的js插件,使用效果也是很是好。html
爲何要使用modal就沒必要多說了,一個網站,在開發過程當中你說你沒用過js彈窗我都不信!好的彈窗不單單給人以美感,也會讓咱們開發效率提升,甚至心情也會舒暢!bootstrap
咱們看看在yii2中如何使用modal。yii2
好比咱們以前添加數據的時候,一般狀況下會點擊按鈕跳轉到添加頁面,保存後再跳轉到列表頁。yii
如今咱們但願點擊添加按鈕的時候,在當前頁面彈窗添加數據,看具體實現。網站
一、use yii\bootstrap\Modal;
二、建立一個按鈕,用於調modal的顯示this
echo Html::a('建立', '#', [ 'id' => 'create', 'data-toggle' => 'modal', 'data-target' => '#create-modal', 'class' => 'btn btn-success', ]);
三、建立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(); ?>
四、修改咱們的create操做以下code
[考慮目前國內網站大部分採集文章十分頻繁,更有甚者不註明原文出處,原做者更但願看客們查看原文,以防有任何問題不能更新全部文章,避免誤導!]htm
關於modal結合gridview,尤爲是列表頁修改的功能,尤爲是modal+select2的問題,可參考文章yii2中如何使用modal彈窗之結合gridview的使用