Question

我有以下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>

如何通过点击外面来避免它被关闭（请注意，我没有从模态中删除关闭按钮）

Answer 1

使用data-backdrop =“static”属性进行点击并使用data-keyboard =“false”来阻止模式框上的esc键按钮html示例代码为“ div id =”idModal“class =”modal隐藏“data-backdrop =”static“data-keyboard =”false“

Answer 2

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

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

Answer 3

你可以试试这个：

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

背景：＆＃39;静态＆＃39; ：表示点击时不关闭模式

键盘：false ：按Esc键不会隐藏模态

您可以在此处查看模态选项的bootstrap用法：http://getbootstrap.com/javascript/#modals-options

如何避免在bootstrap中关闭模态

3 个答案: