10

I don't get it, why does the Magnific Popup plugin closes the popup when I click anywhere on the popup. It has the X button in the corner designed that to do already. Anybody know how to fix it so that it closes only when I click on the X?

Code below:

Open

<script type="text/javascript">
      $(document).ready(function() {

        $('.simple-ajax-popup-align-top').magnificPopup({
          type: 'ajax',
          alignTop: true,
          overflowY: 'scroll' // as we know that popup content is tall we set scroll overflow by default to avoid jump
        });

        $('.simple-ajax-popup').magnificPopup({
          type: 'ajax'
        });

      });
    </script>
user5248
  • 347
  • 1
  • 3
  • 21
  • I guess I figured out the part of it. I added modal: true, and now it does not close. However, the close button does not work either. So now I'm stock again. – user5248 Apr 22 '14 at 21:11
  • Anybody wants to chime in? I hear crickets. – user5248 Apr 22 '14 at 23:32

7 Answers7

17

The below attributes in magnific popup will help you to close the popup window,

closeOnBgClick: if it is true, the popup will close whereever click on outside the content(black overlay). To prevent this, assign the value false to close only when click on X (close) button in top right cornor of popup. By defualt, true is assigned for this attribute.

enableEscapeKey: if it is true, the popup will close when click the escape key. To prevent this, assign the value false to close only when click on X (close) button in top right cornor of popup. By defualt, true is assigned for this.

Hope that these points may help you.!

Srinivasan.S
  • 3,065
  • 1
  • 24
  • 15
4

I had the same issue, but looking through the code I found what the problem was.

In the source code, there is a _checkIfClose function that checks where a click takes place. However, when it checks to see if a click is inside the content, it checks the root element's descendants instead of the container's descendants. The content I was loading through ajax did not have one root element, I had something like this:

<ul><li></li><li></li></ul>
<div></div>
<div></div>

By adding a containing <div> tag around my content, it fixed the problem.

It will still close if you click outside your ajaxed content - for example, I have css padding on the magnific container around my content, so if I click on the padding, it will still close.

Hope this helps!

Jo.
  • 778
  • 1
  • 12
  • 17
  • This solution worked for me too -- thank you SO MUCH, I never would have known. FYI to other people suffering this problem in the future: my situation was I had an inline ` – Jordan Lev Apr 27 '16 at 21:33
  • also worked, disliked a html comment before parent div. cheers – atoms Feb 13 '17 at 10:31
2

This is what I used in my js:

<script>
  $(document).ready(function() {
    $('.magnific-popup-link').magnificPopup({
      type: 'ajax',
      midClick: true,
      mainClass: 'mfp-fade',
      closeOnBgClick: false 
    });
  });
</script>

Regards and I hope this helps!

Mo.
  • 26,306
  • 36
  • 159
  • 225
codeNinja_john
  • 36
  • 3
1
$.extend(true, $.magnificPopup.defaults, {
  closeOnBgClick: false,
});

It works for me. Reference : https://dimsemenov.com/plugins/magnific-popup/documentation.html#translating

hanifny
  • 11
  • 2
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 15 '22 at 12:30
0

I had the same issue. Reading code somewhere I found a class (mfp-prevent-close) that prevents the popup closure.

Adding it to all the items in the popup works (it's not very elegant but, hey, job done :P).

Here, some of my popup contents

<div class="half left pb mfp-prevent-close">
    <label id="first_name_1_label" for="first_name_1" class="fieldLabel firstOfCol left mfp-prevent-close">First Name</label>
    <input id="first_name_1" name="first_name_1" class="fieldInput left mfp-prevent-close" type="text">
    <label id="surname_1_label" for="surname_1" class="fieldLabel left mfp-prevent-close">Surname</label>
    <input id="surname_1" name="surname_1" class="fieldInput left mfp-prevent-close" type="text">
    <label id="salutation_label" for="salutation" class="fieldLabel left mfp-prevent-close">Salutation</label>
    <div class="left mfp-prevent-close" style="min-width: 280px;">
        <select id="salutation" name="salutation" class="fieldInput quarter left mfp-prevent-close">
            <option class="mfp-prevent-close" value=""></option>
            <option class="mfp-prevent-close" value="Mr.">Mr.</option>
            <option class="mfp-prevent-close" value="Mrs.">Mrs.</option>
            <option class="mfp-prevent-close" value="Ms.">Ms.</option>
            <option class="mfp-prevent-close" value="Miss">Miss</option>
            <option class="mfp-prevent-close" value="Dr.">Dr.</option>
            <option class="mfp-prevent-close" value="Prof.">Prof.</option>
            <option class="mfp-prevent-close" value="Other">Other</option>
        </select>
        <input id="salutation_other" name="salutation_other" class="fieldInput quarter right mfp-prevent-close" type="text" disabled="true">
    </div>
</div>

(I had to add them even in the option's because Firefox closed the popup when selecting them).

jdev
  • 96
  • 10
0

This is what I used 

<script type="text/javascript">
$("#custom-content").click(function(e){
  if ($(e.target).is('.mfp-close')) return;
  if ($(e.target).is('a')) return;
  return false;
});
</script>
arjun
  • 1,594
  • 16
  • 33
0

Close the shady click function and close the ESC key to exit the function, set the failure, find a solution

$('.jq-btn-contact').magnificPopup({
  items: {
    src: '../contact/index.html',
    type: 'iframe',
    closeOnBgClick: 'false',
    enableEscapeKey: 'false'
  }
});
Jishnu V S
  • 8,164
  • 7
  • 27
  • 57
Angel
  • 1