如何避免在引导程序中关闭模式

Posted 2023-02-22

【中文标题】如何避免在引导程序中关闭模式

【英文标题】：How to avoid closing a modal in bootstrap

【发布时间】：2016-08-18 19:47:02

【问题描述】：

我有以下 bootstrap 3 模态

<!-- SignUp Modal -->
<div style="display: none;" class="modal fade" id="signUpModal" tabindex="-1" role="dialog" aria-labelledby="signUpModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="signUpModalLabel">Sign up</h4>
            </div>
            <div class="modal-body">
                <input type="email" name="newsletter_email" value="" placeholder="Please insert email..." required>
            </div>
            <div class="modal-footer">
                <input type="submit" name="submit" value="Submit" class="button" />
            </div>
        </div>
    </div>
</div>
<!-- /.SignUp Modal -->

<script type="text/javascript">
$(document).ready(function()
    $("#signUpModal").modal("show");
);
</script>

我怎样才能避免通过点击它外部来避免它被关闭（请不要从模式中删除关闭按钮）

【问题讨论】：

看看这个***.com/a/22208662/4790490

【参考方案1】：

使用 data-backdrop="static" 属性点击退出并使用 data-keyboard="false" 阻止模态框按钮上的 esc 键 html 示例代码是 "div id="idModal" class="modal隐藏" data-backdrop="static" data-keyboard="false"

【参考方案2】：

@feroz-siddiqui 的答案有效，但我找到了另一种实现相同结果的方法。

$('#signUpModal').on('hide.bs.modal', function (event) 
    event.preventDefault();
);

【参考方案3】：

你可以试试这个：

$('#myModal').modal(
     backdrop: 'static', 
     keyboard: false
)  

背景：'static'：表示点击时不关闭模态

keyboard: false：按Esc键不会隐藏模态

你可以在这里看到模式选项的引导用法：http://getbootstrap.com/javascript/#modals-options