Doubleclick block Bootstrap Modal Window

Question

When I doubleclick quickly, two modal windows open simultaneously and close button is blocked. You can try live demo in http://1card.digital/prb/modalprb1.html

Link to Open Modal

<a class="btn btn-primary btn-block btn-lg" data-toggle="modal" href="#myModalAgrP" id="modallinkAgrP" data-title="ModalPrb1Mdl">Open Modal</a>

JQuery to Open Modal

   <script type = "text/javascript" > $(document).ready(function () {
        jQuery('#modallinkAgrP').click(function (e) {
            $('#myModalAgrP').modal('hide');
            $('.modal-container').load($('#modallinkAgrP').data('title'), function (result) {
                $('#myModalAgrP').modal({
                    show: true
                });
            });
        });
    });
    $(document).on("hidden.bs.modal", "#myModalAgrP", function () {
        $('#myModalAgrP').remove();
    }); 
    </script>

Modal Code

<div class="modal fade" id="myModalAgrP">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class='modal-title'><a target="_blank" href="#"><span class="fa fa-question-circle"></span></a>&nbsp;Bootstrap Modal</h4>
            </div>
            <div class="modal-body">
                <div class="callout callout-info">Prueba de Bootstrap Modal</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

Thank's a lot for your answer, this code solve my double click problem...

$('a').on('click', function(e){
  var $link = $(e.target);
  e.preventDefault();
  if(!$link.data('lockedAt') || +new Date() - $link.data('lockedAt') > 900) {
    console.log('clicked');
//     doSomething();
  }
  $link.data('lockedAt', +new Date());
});

Please try amending your codes so that when you click (the 1st click), it disables the button so that you will not "accidentally" click the 2nd time. Of course you need to enable the button back after you close the modal — Ken Lee, Dec 16 '20 at 02:32
https://stackoverflow.com/questions/11621652/how-to-prevent-a-double-click-using-jquery Use e.preventDefault(); and new Date() OR setTimeout and return false OR e.preventDefault(); e.stopPropagation(); — react_or_angluar, Dec 16 '20 at 02:38

score 0 · Answer 1 · answered Dec 16 '20 at 03:05

You can specify "static" for a backdrop which doesn't close the modal on click.

For example:

jQuery('#modallinkAgrP').click(function (e) {
  $('.modal-container').load($('#modallinkAgrP').data('title'), function (result) {
    $('#myModalAgrP').modal({
      show: true,
      backdrop: 'static'
    });
  });
});

Doubleclick block Bootstrap Modal Window

1 Answers1