Bootstrap模态框

最新推荐文章于 2024-07-29 11:53:27 发布

dfjh7645

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量85

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhaohy/p/4728051.html

版权

backdrop选项，当设置成false的时候, 背景不会出现半透明的遮盖层，当用户点击模态框外部时不会关闭模态框；设置成true的时候会出现遮盖层，当用户点击模态框外部时则会关闭模态框。

那如果又想有这个遮盖的效果，但是又不想用户点击模态框外部时关闭模态框，该怎么弄能？其实这个遮盖层就是加了一个DIV. (<div class="modal-backdrop in"></div>)

我们可以把backdrop设置成false，然后直接加上这个DIV就可以了。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 模态框（Modal）插件事件</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<h2>模态框（Modal）插件事件</h2>

<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
   开始演示模态框
</button>

<!-- 模态框（Modal） -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" data-backdrop="false" data-keyboard="false" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-backdrop  in"></div>
   <div class="modal-dialog">
      <div class="modal-content">
         <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-dialog -->
</div><!-- /.modal -->
<script>
   $(function () { $('#myModal').modal('hide')})});
</script>


</body>
</html>

转载于:https://www.cnblogs.com/zhaohy/p/4728051.html

dfjh7645

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap模态框

backdrop选项，当设置成false的时候,背景不会出现半透明的遮盖层，当用户点击模态框外部时不会关闭模态框；设置成true的时候会出现遮盖层，当用户点击模态框外部时则会关闭模态框。那如果又想有这个遮盖的效果，但是又不想用户点击模态框外部时关闭模态框，该怎么弄能？其实这个遮盖层就是加了一个DIV. (<div class="modal-backdrop in"&g...
复制链接

扫一扫