elements-modal.html

[Marialuisa]

Good morning, I would need to have the large modal (elements-modals.html page) already open without having to click on the button.
I inserted the word “show” in the class but it doesn’t work. Can you help me?
Sorry for my English.
Thanks
Marialuisa

This code:

<button class="btn btn-modern btn-primary" data-toggle="modal" data-target="#largeModal">Launch Large Modal</button>

								<div class="modal show" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel" aria-hidden="true">							<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="largeModalLabel">Large 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>

---

• This topic was modified 2 weeks, 4 days ago by Support.

[Support]

Hello, here is an example on how to show the modal on page load:

JS: (js/custom.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">&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-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

More details: https://getbootstrap.com/docs/5.0/components/modal/

---

[Author]

Posts