Modals

[middlemann]

how do i get a modal to popup automatically with delay?

---

[Support]

Hi,

There are 2 types of lightbox/modal that you can show on page load.

1) OPTION 1

Lightbox with only an IMG for the content, example:

The POPUP HTML you put right after opening the BODY tag or at the bottom before closing it.

<div id="test-modal" class="white-popup-block p-0 mfp-hide">
	<img src="https://placehold.co/600x400" class="img-fluid" />
</div>

2) JS (js/custom.js)

$(function () {
	$('.popup-modal').magnificPopup({
		type: 'inline',
		preloader: false
	});
});

$(document).ready(function () {
	if ($('#test-modal').length) {
		$.magnificPopup.open({
			items: {
				src: '#test-modal' 
			},
			type: 'inline'
	  });
	}
});

2) OPTION 2

HTML:

<button class="d-none" data-bs-toggle="modal" data-bs-target="#defaultModal" id="openModal">
	Launch Default Modal
</button>

<div class="modal fade" id="defaultModal" tabindex="-1" role="dialog" aria-labelledby="defaultModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="defaultModalLabel">Default Modal Title</h4>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
			</div>
			<div class="modal-body">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

JS:

$(window).on('load', function(){
    var delay = 300; // Time in mili-seconds

    setTimeout(function(){
        $('#openModal').trigger('click');
    }, delay);
});

* Use only one of them.

Kind Regards.

---

[middlemann]

can/ do either of those option open automatically with delay

---

[Support]

Hello, the delay is set on “var delay = 300;” in the second option.

Change it to 10000 and it will be 10 seconds (for example).

---

[Author]

Posts