Click event of a MODAL

Question

How do I capture the click event of a modal when closing it without having to use jquery
similar to this link

$(document).ready(function(){

    $("#myModal").modal("show");

    $("#myBtn").click(function(){
        $("#myModal").modal("hide");
    });
    $("#myModal").on('hidden.bs.modal', function () {
            alert("Esta accion se ejecuta al cerrar el modal")
    });
});

Hi, this looks like an angularJs problem, so you should probably retag it. — Keenan Diggs, Sep 11 '19 at 15:10
Do you have Angular code that creates the modal? Please share that in that case. Right now, we have no idea what toolkit you use to create the modal (Bootstrap, Angular Material, etc.) — ShamPooSham, Sep 11 '19 at 15:56
if bootstrap, you can disable closing by backdrop click or esc key with this ` data-backdrop="static" data-keyboard="false" ` and add event on-click or ngClick on close button and close "times (X)" — Leonardo Getulio, Sep 11 '19 at 15:58
Question seems a little ambiguous. On first read, I thought you were asking for how to create functionality without using jQuery library. — Jay Jordan, Sep 11 '19 at 17:11
When using jQuery `.on()` you need to pass an actual event type in the first param, example: `click`, `hover`, etc. You are passing `hidden.bs.modal` which is not a valid event and will not ever be triggered. — BugsArePeopleToo, Sep 11 '19 at 17:26

score 0 · Accepted Answer · answered Sep 11 '19 at 17:38

When your modal is closed, then it's display attribute is set to none. If you want to do something on closing the modal without using hidden.bs.modal, then one of the solution is to implement a style change listener.

Add a style change listener which listens to changes in styles of the modal. To that style change listener, specify what div you want to listen(in your case, it's the modal div) and the style attribute of that div(in your case, it's display attribute).

So whenever the display of the modal changes to none, run the function you want.

For more info, refer this link:

https://stackoverflow.com/a/55590917/5913737

Click event of a MODAL

1 Answers1