Prevent Bootstrap Modal from disappearing when cli

问题:

This question already has answers here:

Disallow Twitter Bootstrap modal window from closing (18 answers)

Closed 9 months ago.

I'm using the Twitter Bootstrap modal as a wizard window, and would like to prevent the user from closing it when clicking outside of the modal or when pressing escape. Instead, I want it to be closed when the user presses the finish button. How could I achieve this scenario?

回答1:

If using JavaScript then:

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

or in HTML:

<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">

回答2:

Works too, data-backdrop="static" to click out and data-keyboard="false" to Esc in your div modal:

<div id="idModal" class="modal hide" data-backdrop="static" data-keyboard="false">

回答3:

You can Use Direct in bootstrap model also.

<div class="modal fade" id="myModal" data-keyboard="false" data-backdrop="static">

回答4:

Just add data-backdrop="static" and data-keyboard="false" attributes to that modal.

Eg.

<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">

回答5:

You can use the code below

$.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';

to change the default behavior.

回答6:

jQuery('#modal_ajax').modal('show', {backdrop: 'static', keyboard: false});

回答7:

I use these attributes and it works, data-keyboard="false" data-backdrop="static"

回答8:

This code will prevent the modal from closing if you click outside the modal.

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

回答9:

<button class='btn btn-danger fa fa-trash' data-toggle='modal' data-target='#deleteModal' data-backdrop='static' data-keyboard='false'></button>

simply add data-backdrop and data-keyboard attribute to your button on which model is open.

回答10:

<button class="btn btn-primary btn-lg" data-backdrop="static" data-keyboard="false" data-target="#myModal" data-toggle="modal">

回答11:

If you need disable clicking outside but enable pressing escape

$('#myModal').modal({
    backdrop: 'static',   // This disable for click outside event
    keyboard: true        // This for keyboard event
})

回答12:

The following script worked for me:

// prevent event when the modal is about to hide
$('#myModal').on('hide.bs.modal', function (e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
});

回答13:

If you need to setup this after the modal is shown, you can use @Nabid solution. However, sometimes you still need to allow some method to close the modal. Assuming you have a button with class really-close-the-modal, which should really close the modal, you can use this code (jquery):

var closeButtonClicked = false;

$('.really-close-the-modal').on('click', function () {
    closeButtonClicked = true;
});

$('#myModal').on('hide.bs.modal', function (e) {
    if (!closeButtonClicked) {
        e.preventDefault();
        e.stopPropagation();
        return false;
    }
    closeButtonClicked = false;
});

This isn't really nice code design, but it helped me in a situation where the modal was shown with a loader animation, until an ajax request returned, and only then could I know if the modal needed to be configured to prevent "implicit" closing. You can use a similar design to prevent closing the modal while it's still loading.

回答14:

You should use backdrop static , keyboard false. and can use close button off by using jQuery or can remove from modal html. Hope this help.

 $('#MyModal').modal({ backdrop: 'static', keyboard: false });
    $('#MyModal .close').css('display','none');

回答15:

Your code is working when i click out side the modal, but if i use html input field inside modal-body then focus your cursor on that input then press esc key the modal has closed. Click here

回答16:

<div class="modal show">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">     

    <h4 class="modal-title">Modal title</h4>
     </div>
     <div class="modal-body">
      <p>One fine body&hellip;</p>
  </div>

  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

i think this codepen can help you prevent modal close css and bootstrap