How to avoid closing a modal in bootstrap

Question

I have the following bootstrap 3 modal

<!-- 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>

How can I avoid it being closed by clicking outside of it (please not that I removed the close buttons from the modal)

Check out this http://stackoverflow.com/a/22208662/4790490 – Hardik Pithva Apr 25 '16 at 12:29 — Hardik Pithva, Apr 25 '16 at 12:29

score 3 · Accepted Answer · answered Apr 25 '16 at 12:27

3

use data-backdrop="static" attribute for click out and use data-keyboard="false" for blocking esc key on modal box button html sample code is "div id="idModal" class="modal hide" data-backdrop="static" data-keyboard="false"

answered Apr 25 '16 at 12:27

feroz siddiqui

76
10

score 1 · Answer 2 · answered Apr 25 '16 at 13:00

1

The answer of @feroz-siddiqui works but I found another way of achiving the same result.

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

answered Apr 25 '16 at 13:00

Bogdan

1,840
1
25
39

score 1 · Answer 3 · answered Apr 13 '17 at 02:57

You could try this:

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

backdrop: 'static': means doesn't close the modal on click

keyboard: false: press Esc key won't hide the modal

You coulde see bootstrap usage of modal options here: http://getbootstrap.com/javascript/#modals-options

How to avoid closing a modal in bootstrap

3 Answers3