您现在的位置是:网站首页 > 心得笔记
bootstrap模态框使用所遇到的坑
简介一直都在使用bootstrap的模态框,感觉方便又便捷,这里记录自己遇到的一些坑和一些使用小技巧
1、简单使用
<!-- 按钮触发模态框 --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button> <!-- 模态框(Modal) --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">模态框(Modal)标题</h4> </div> <div class="modal-body">在这里添加一些文本</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">提交更改</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div>
效果:
2、事件
事件 | 描述 | 实例 |
---|---|---|
show.bs.modal | 在调用 show 方法后触发。 | $('#identifier').on('show.bs.modal', function () { // 执行一些动作...}) |
shown.bs.modal | 当模态框对用户可见时触发(将等待 CSS 过渡效果完成)。 | $('#identifier').on('shown.bs.modal', function () { // 执行一些动作...}) |
hide.bs.modal | 当调用 hide 实例方法时触发。 | $('#identifier').on('hide.bs.modal', function () { // 执行一些动作...}) |
hidden.bs.modal | 当模态框完全对用户隐藏时触发。 | $('#identifier').on('hidden.bs.modal', function () { // 执行一些动作...}) |
3、总结遇到的坑
模态框总是被阴影层遮挡?
先检查阴影层和弹出层的z-index的层级(一般如果你不手动改的话,是不会出现这个问题的)
再检查你的模态框代码是不是直接放页面body层下面的(注意:模态框一定要直接放在body下,不能放在body下面的一个div下,这样绝对会出现模态框被阴影层遮挡问题)
js控制模态框不显示问题?
这种情况,一般是因为你页面代码少了某个标签元素,比如,你div少了结束那一半
新增或编辑页面改用模态框新增或编辑,如果新增内容比较多时,最好不要再采取我们一般的做法,如何解决?
这种情况,我们可以按照正常的资源路由那种写法,新增个`create_and_edit.blade.php`页面,正常书写页面代码;控制器中写法如下,返回视图
public function create(Tpl $tpl, Tpltype $tpltype) { $data = $tpltype->all(); return response()->view('admin.tpls.create_and_edit', compact('data', 'tpl'))->header('Content-Type','text/html;charset=utf-8'); }
js写法:
//新增 $(document.body).on("click", ".createtpl", function(){ var url = $(this).data('url'); $.get(url, function(data){ $("#createModal .modal-body").html(data); $('#createModal').modal('show'); }); }); 这种方式非常适合,弹出框内容比较多的情况!!!
注意:layer弹框也有同样的问题
如果触发了弹层 layer.open 且content是某个DOM元素
content:$('#dialog')
那么这里弹出层,遮罩会遮住到弹窗导致操作不了。
官网给出的说法是 如果弹层的内容content是某个DOM元素的话,要放在body的根节点下。不能放在div里面了。