JS代码链接到模式弹出窗口上的“关闭”按钮

Question

Unfortunately I cannot post a working code/example because it's part of a huge HTML template and I cannot extract only the interesting part :( sorry for that.

Anyway, I have this popup that I define like this:

<a id='bookShopping' class="popup-text" href="#book-shopping-dialog"></a>
<div id="book-shopping-dialog" class="mfp-dialog mfp-hide">
    random popup text...
    <button>Close the popup!!!</button>
</div>

and that I call with

<a onclick="document.getElementById('bookShopping').click(); return false;" >PopUp!</a>

The popup itself has a "X" close button on the upper right corner, defined with

<button class="mfp-close">X</button>

I want MY BUTTON, inside the "random text", to be able to close the popup as well. I tried:

1) Give my button the mfp-close class.
. My button will jump to the upper right corner

2) Setting the div to display:none and/or display:block
. The popup will close but IT WILL NEVER REAPPEAR.

So, my last resort would be to call the same code that the "mfp-close" class is calling. My problem is that I can only find the mfp-close class defined in CSS, nothing in JS. If I try to "inspect" the "X" button, it will not give me any event linked to it, nor any JS associated with its "click".

I know that without the source code is hard to understand, but the general question is: where, in Chrome or Firefox, can I find ALL THE JS CODE EXECUTED when I click on an element?

Thank you in advance.

Answer 1

You appear to be using the Magnific popup jQuery plugin, which has an API including a close() method. You should call that method rather than try to hack around with classes.

http://dimsemenov.com/plugins/magnific-popup/documentation.html

$.magnificPopup.close();