Whenever I'm trying to fill login form (which is a magnific pop up ajax box) it gets closed in the first instance of click.
main.html
$(document).ready(function() {
$('.ajax-popup-link').magnificPopup({
type: 'ajax',
alignTop: false,
overflowY: 'scroll'
});
});
<a class="simple-ajax-popup-align-top" href="result.php">try me</a><br>
result.php
<div>
<form action="..." method="post">
Email:
<label class="field_container">
Password:
<input type='text' name='cust_username' id='username' maxlength="12" style="width: 250px; height: 30px" /></label>
<label class="field_container">
Password:
<input type='password' name='cust_password' id='password' maxlength="12" style="width: 250px; height: 30px" /></label>
<input type='submit' name='Submit' value='Login' />
</form>
</div>
Make sure your page that you are "ajax-ing" isn't containing more info or tags than needed.
E.g. it should be as clean as this:
<div>
<h3>Heading</h3>
<p>
Text
</p>
</div>
In other words, try avoiding multiple <div>
s and don't include <html>
, <body>
etc. That will unfortunately lead to the behaviour described in the question, of popup closing. I assume it's because it has trouble determining where the content actually is, so it thinks you clicked outside content => closes popup.
closeOnContentClick: false
is already set by default so that won't help, but cleaning up the code to as simple as possible might.
I would also like to mention an alternative: http://nyromodal.nyrodev.com/, which seems to handle things way smoother, and also includes content filtering by id.
add this to your magnific popup options
closeOnContentClick: false
so
$('.ajax-popup-link').magnificPopup({
type: 'ajax',
alignTop: false,
overflowY: 'scroll',
closeOnContentClick: false
});
add this to your magnific popup options
for click inner white box
closeOnContentClick: false
Stop closing box when click on black bg
closeOnBgClick:false
Full example
$.magnificPopup.open({
items: {
src: '<div class="white-popup"><h1>Modal Test</h1><p>Test Some text.</p><p><a class="popup-modal-dismiss">Dismiss</a></p></div>',
type:'inline'
},
closeOnContentClick: false,
closeOnBgClick:false
});