bootstrap点击遮罩不关闭弹出框

2025-04-18 00:14:42

1、打开前端开发工具,新建一个html代码页面

2、引入boot衡痕贤伎strap.min.css、bootstrap.min.css、bootstrap.min.js这三个文件,然后创建点击弹出框时显示弹出框的标签。创建弹出框代码:<!-- 按钮触发模态框 --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 点击显示弹出框 </button> <!-- 模态框(Modal) --> <div class="modal fade" id="myModal" aria-hidden="true" > <div class="modal-dialog" style="width: 400px;"> <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-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->

bootstrap点击遮罩不关闭弹出框

3、保存html代码后使用浏览器打开,点击按钮后显示弹出框,这个时候点击遮罩会发现弹出框被关闭

bootstrap点击遮罩不关闭弹出框
bootstrap点击遮罩不关闭弹出框
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢