Beldion Bryan Balanan Beldion Bryan Balanan - 6 months ago 8
jQuery Question

how to properly close a modal through jQuery

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

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