CODEWITHSUNDEEP
jquerymagnific-popup
user5248
user5248

Reputation: 357

Magnific Popup closes when clicked anywhere

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>

Upvotes: 10

Views: 20791

Answers (7)

hanifny
hanifny

Reputation: 21

$.extend(true, $.magnificPopup.defaults, {
  closeOnBgClick: false,
});

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

Upvotes: 2

Angel
Angel

Reputation: 1

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

Upvotes: 0

codeNinja_john
codeNinja_john

Reputation: 36

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!

Upvotes: 2

arjun
arjun

Reputation: 1614

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>

Upvotes: 0

Jo.
Jo.

Reputation: 790

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!

Upvotes: 4

Srinivasan.S
Srinivasan.S

Reputation: 3143

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.!

Upvotes: 17

jdev
jdev

Reputation: 96

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).

Upvotes: 0

Related Questions