如何通过jQuery正确关闭模式

Question

Here is the jquery

$(document).ready(function(){
$(".btn-add-menu").click(function(){
  $('.pace-done').addClass('no-pad');
  $("#myModalAddApplet").modal('hide');
});

});

The issue with this is that it successfully hides the modal #myModalAddApplet but the new modal it opens are long and the scroll bar is not working with the modal after this happens, i have tried debugging it myself and the issue is with the line $("#myModalAddApplet").modal('hide'); because if I comment out that line then the scroll bar works fine.

Anyone here who can teach me how to properly close or hide my modal...

PS. .btn-add-menu opens another modal...

Answer 1

Your problem is not in the jQuery code (it is correct), but in the fact that you're forcing jQuery/Bootstrap to close & open the dialog at the same time. You really shouldn't bind two actions (both declarative and imperative, in particular) on a single button - this is an antipattern & is overall a bad programming habit.

Remove the declarative dialog call from the .btn-add-menu , move it to the jQuery action and wrap in a timeout to allow previous dialog action to complete:

$(".btn-add-menu").click(function(){
    $('.pace-done').addClass('no-pad');
    $("#myModalAddApplet").modal('hide');

    setTimeout(function() {
        $("#otherApplet").modal('show');
    },
    500);
});