CODEWITHSUNDEEP
twitter-bootstrapmodal-dialogbootstrap-modal
Bogdan
Bogdan

Reputation: 2042

How to avoid closing a modal in bootstrap

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)

Upvotes: 3

Views: 814

Answers (3)

J. Fan
J. Fan

Reputation: 881

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

Upvotes: 1

Bogdan
Bogdan

Reputation: 2042

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();
});

Upvotes: 1

feroz siddiqui
feroz siddiqui

Reputation: 76

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"

Upvotes: 3

Related Questions