yii2 常用组件 -- 模态框

简介

yii2中modal的使用也是较为频繁的，而且在很大程度上能提升网站的用户体验，那么我们就不得不介绍一下yii2自带的bootstrap组件Modal是如何使用的。

实例

引入modal组件,就是在页面中引入一个模态框

<?php
use yii\bootstrap\Modal;

Modal::begin([
    'id' => 'page-modal',
    'header' => '<h5>这里是标题</h5>',
    'toggleButton' => ['label' => 'click me'],
]);

echo '这里是模态内容...';

Modal::end();
?>

添加触发Modal的按钮

<?= Html::a('点击按钮', '#', [
     'class' => 'btn btn-success',
     'data-toggle' => 'modal', 
     'data-target' => '#page-modal'    //此处对应Modal组件中设置的id
     ]) 
 ?>

如此一个简单的模态框（Modal）就做好了

演示

详细参数

https://github.com/yiisoft/yii2-bootstrap/blob/master/Modal.php