Fancybox 2 Pop up onload
From fancybox.net: FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page.
Here I trigger a fancybox to open by code rather than a user click.
by ashleycam3ron
September 11, 2020
HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected] /dist/jquery.fancybox.min.css">
<script src="//cdn.jsdelivr.net/gh/fancyapps/[email protected] /dist/jquery.fancybox.min.js"></script>
<a id="popup-link" style="display:none;" href="#popup"></a>
<div id="popup" style="display:none;">
<h2>Entry Title</h2>
<p><a target="_blank" href="#">Visit</a> our site to learn more</p>
</div>
CSS
#popup {
background: url(https://via.placeholder.com/500/000000/000000) no-repeat;
color: white;
text-align: center;
padding:150px;
}
JavaScript
jQuery("#popup-link").fancybox({
width: 500,
height: 300,
padding: 0,
autoSize: false,
closeClick: true,
openEffect: 'none',
closeEffect: 'fade'
});
jQuery("#popup-link").trigger('click');