最近要使用modal效果，于是参考了一些网上的学习案例，学习记录一下。
1.创建按钮
Html::button('控制',[
'id' =>'data-control',
'title' => Yii::t('app', '控制'),
'class' =>'btn btn-xs',
'data-toggle'=>'modal',//触发modal
'data-target'=>'#control-modal',//要触发的模态框id
'data-id' =>$key
]);2.创建modal
use yii\bootstrap\Modal;
Modal::begin([
'class'=>'modal',
'id' => 'control-modal',
'header' => '<h1 class="modal-title">按钮控制</h1>',
'footer' => '<a href="#" class="btn btn-primary" data-dismiss="modal">关闭</a>',
]);
//以下js代码借鉴了网上博主的代码
$requestControlUrl = Url::toRoute('modal');
$controlJs = <<<JS
$('button#data-control').on('click', function () {
$.get('{$requestControlUrl}', { id: $(this).parents('tr').attr('data-key') },
function (data) {
$('.modal-body').html(data);
}
);
});
JS;
$this->registerJs($controlJs);
Modal::end();3.建立modal.php文件，写一些要放在modal中的html内容
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<span>这是modal模态框内容</span>
</body>
</html>4.写一个actionModal方法
public function actionModal($id)
{
return $this->render('modal',['id'=>$id]);
}5.效果图
**在编写过程中遇到了几个问题：
1.模态框闪退
一开始出现了点击按钮modal闪退的问题，在百度了半天后，大致知道是modal.js文件与bootstrap.js文件产生冲突，因此在资源中将引用的bootstrap.min.js引用注释后，发现modal正常显示。
2.模态框只显示header和footer，多次点击按钮后有几次会显示body内容，后发现一开始是使用了a标签来做按钮，在菜鸟教程中看到：如果添加了一个带有有效 URL 的 href，则会加载其中的内容。那我理解应该是与modal的js产生了冲突，将其改为button则无此问题。**
445
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
