12

Please Please Please help me.. I have been trying to get the magnific popup ajax box to show login form. It seems that form appears but as soon as I click anywhere in form or ajax body, it disappears. below is the code

 $(document).ready(function() {
 $('.ajax-popup-link').magnificPopup({
 type: 'ajax',
 alignTop: false,
 closeOnContentClick: false,
 overflowY: 'scroll'
 });
 });

<a class=".ajax-popup-link" href="result.php">try me</a><br>

Below is the php that I look to load in ajax box. This is not the complete one

 Email:<div class="field_container">Password:</label>
    <input type='password' name='cust_password' id='password'  maxlength="12" style="width: 250px; height: 30px"; /></div>

   <input type='submit' name='Submit' value='Login' />
user2671781
  • 141
  • 1
  • 2
  • 11

3 Answers3

15

This is the old thread but for all the future readers: to fix this, there has to be only one root element in the html that comes out from the ajax call:

As per documentation:

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

So in your ajax call you should return something like this:

<div>    
    ...your html content 
</div>

and your popup will no longer close itself on content click.

Davor Zlotrg
  • 6,020
  • 2
  • 33
  • 51
  • Weird stuff. Had one root element with a preceding HTML comment. Removed comment => works. Why not handle this internally by creating a wrapper dynamically instead of breaking in obscure ways is beyond me. – krukid Aug 07 '15 at 10:46
  • It helps. Thanks. I had an html comment above root div and it caused the break of close as well – Sergey Khmelevskoy Feb 18 '18 at 09:57
9

I had the same problem, solved it by using:

modal:true,

instead of:

closeOnContentClick: false,
Zurd
  • 686
  • 7
  • 16
  • 6
    Or, set `closeOnBgClick: false` instead of `modal:true` if you still want the close button and escape key (see http://dimsemenov.com/plugins/magnific-popup/documentation.html#options) – Michael Rush Dec 02 '13 at 19:07
2

I solved the problem removing HTML and BODY tags in result.php.

user3073742
  • 33
  • 5