yii2中如何使用modal彈窗之基本使用

作者：白狼 出處：http://www.manks.top/yii2_modal_baseuse.html 本文版權歸作者，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。

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的使用，此處有兩點需要提醒大家：

1. 在控制元素（比如按鈕或者鏈接）上設置屬性 data-toggle="modal"，
2. 同時設置 data-target="#identifier" 或 href="#identifier" 來指定要切換的特定的模態框（帶有 id="identifier"）

以上，我們在yii2中實現了modal的基本使用。我們還講述了在yii2中有關modal結gridview的使用，推薦你看一看。

[考慮目前國內網站大部分采集文章十分頻繁，更有甚者不注明原文出處，原作者更希望看客們查看原文，以防有任何問題不能更新所有文章，避免誤導！]

繼續閱讀

關於modal結合gridview，尤其是列表頁修改的功能，尤其是modal+select2的問題，可參考文章yii2中如何使用modal彈窗之結合gridview的使用​​