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事件时不关闭。

  • 相关阅读:
    [算法]最长子数组问题
    [算法]K-SUM problem
    selenium-远程调用
    pytest-fixture
    Ubuntu18.04中安装virtualenv和virtualenvwrapper
    shell
    mac保存远程链接
    css
    js基础
    css基础
  • 原文地址:https://www.cnblogs.com/rxbook/p/11981714.html
Copyright © 2011-2022 走看看