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

時間 2019-11-09

標籤 yii2 yii 如何使用 modal 基本欄目 PHP 简体版

原文原文鏈接

做者：白狼出處：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的使用