How to open two magnific popups with forms in same page automatically?

114 Views Asked by At

I have two popup modals one for enquiries & another one for newsletter subscriptions. Let newsletters subscription form come after the enquiry form popup form.

I have used set timeout for newsletter, so it loads after some time. then enquiry form used animation when page loads show the popup.

Code for news letter popup

setTimeout(function() {
        $.magnificPopup.open({
            items: {
                src: '#newsletter-dialog',
                type:'inline'
            },
            fixedContentPos: true,
            callbacks: {
                open: function () {
                    var html = "<button title='Close (Esc)' type='button' class='mfp-close'></button>";
                    $('.newsletter-dialog').append(html);
                }
            },
            modal: true
        });
    }, 10000);

code for enquiry form popup

  $.magnificPopup.open({
        items: {
            src: '#enquiry-form',
            type:'inline'
        },
        fixedContentPos: true,
        showCloseBtn:true,
        closeBtnInside:true,
        preloader: true,
        midClick: true,
        removalDelay: 300,
        closeMarkup: '<button title="%title%" type="button" class="mfp-close"></button>',
        modal: true
    });


Bugs:

  1. When newsletter popup opens, it closes the enquiry popup
  2. close button not incorporating to both popups

Markup

<div id="newsletter-dialog" class="zoom-anim-dialog mfp-hide newsletter-dialog">
  <div>Testing 1</div>
</div>

<div id="enquiry-form" class="zoom-anim-dialog mfp-hide enquiry-form">
  <div>Testing 2</div>
</div>

0

There are 0 best solutions below