zoukankan      html  css  js  c++  java
  • 阻止Bootstrap 模态框点击背景空白处自动关闭

    问题描述

    模态框点击空白处,会自动关闭,怎么阻止关闭事件呢?

    解决方法

    在HTML页面中编写模态框时,在div初始化时添加属性 aria-hidden=”true” data-backdrop=”static”,即可。

    <!-- 模态框(Modal) -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" aria-labelledby="myModalLabel">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </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 -->

    在需要显示模态框,初始化时,$(‘#myModal’).modal({backdrop: ‘static’, keyboard: false}); 其中 ,backdrop:’static’指的是点击背景空白处不被关闭; keyboard:false指的是触发键盘esc事件时不关闭。

  • 相关阅读:
    23种设计模式之外观模式
    HashMap系列之底层数据结构
    HashMap系列之基本概念
    轻松搞定荷兰国旗问题
    服务治理:Spring Cloud Eureka
    Spring Cloud简介
    简单了解什么是微服务架构
    字符串和时间
    调用shell命令
    s3操作
  • 原文地址:https://www.cnblogs.com/rxbook/p/11981714.html
Copyright © 2011-2022 走看看