Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to open popup within popup in magnific popup plugin

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

like image 494
Yogesh Saroya Avatar asked Feb 20 '14 13:02

Yogesh Saroya


People also ask

How do I use Magnific popup?

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.

How do I use Magnific popup in wordpress?

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.

How do I use Magnific popup in react?

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.

What is magnificPopup?

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.


2 Answers

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

like image 71
Dmitry Semenov Avatar answered Sep 19 '22 06:09

Dmitry Semenov


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

like image 31
Lee Price Avatar answered Sep 19 '22 06:09

Lee Price