can anybody tell me how to open popup within popup using magnific-popup jquery plugin (using ajax).
$('.ajax-popup-link').magnificPopup({
type: 'ajax'
});
<a href="path-to-file.html" class="ajax-popup-link"> Link 1 </a>
on "path-to-file.html"
<a href="path-to-other-file.html" class="ajax-popup-link"> next popup </a>
Thanks
The Magnific CSS Magnific requires it's own CSS code in order to display things properly. Simply add the magnific-popup. css to your page like a normal CSS document. You should include it after your reset/normalize, but before your own styles.
1) Add MP files to your theme's directory Create the directory magnific-popup in your theme's directory. Download the MP CSS and JS files from GitHub and put both in the magnific-popup directory: jquery. magnific-popup.
The easiest way to use react-magnific-popup is to install it from NPM and include it in your own React build process (using Browserify, Webpack, etc). You can also use the standalone build by including dist/react-magnific-popup. js in your page.
Magnific Popup is a fast, light, mobile-friendly and responsive lightbox and modal dialog jQuery plugin. It can be used to open inline HTML, ajax loaded content, image, form, iframe (YouTube video, Vimeo, Google Maps), and photo gallery. It has added animation effects using CSS3 transitions.
You can't have two windows open at once. But the content of popup is replaced when is called second time, here is example - http://codepen.io/dimsemenov/pen/hwIng
I know this an old thread, but for anyone still interested, this worked for me:
$(document).on('click', '.sAjax', function(e){
$.magnificPopup.close(); // Close existing popup
// Open new popup
$.magnificPopup.open({
items: {
src: 'new-page.html',
type: 'ajax'
}
});
e.preventDefault();
});
Don't forget to give your link the new class of .sAjax
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With