Hello, the delay can be set in the JS, check the “delay” below:
JS:
$(window).on('load', function(){
var delay = 5000; // Time in mili-seconds
setTimeout(function(){
$('#openModalLink').trigger('click');
}, delay);
});
HTML:
<button class="btn btn-modern btn-primary d-none" data-toggle="modal" id="openModalLink" data-target="#defaultModal">
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="close" data-dismiss="modal" aria-hidden="true">×</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-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The fade class will make the default effect.
More details: https://getbootstrap.com/docs/5.0/components/modal/