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:
- When newsletter popup opens, it closes the enquiry popup
- 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>