how to trigger modal on page load
Question
I have this html modal that is triggered by the button click
<button type="button" class="btn btn-success mb-1" data-toggle="modal" data-target="#largeModal"> Large </button> <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel" style="display: none;" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="largeModalLabel">Large Modal</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p> There are three species of zebras: the plains zebra, the mountain zebra and the Grévy's zebra. The plains zebra and the mountain zebra belong to the subgenus Hippotigris, but Grévy's zebra is the sole species of subgenus Dolichohippus. The latter resembles an ass, to which it is closely related, while the former two are more horse-like. All three belong to the genus Equus, along with other living equids. </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary">Confirm</button> </div> </div> </div> </div>
I want to trigger the modal on page load instead of button click. How can I do this?
3 answers
solution1
0 ACCPTED 2018-10-23 03:10:23
if you're working with Bootstrap (then I also assume you're using jQuery ), it's as simple as the following in the html of the page you're loading.
$('#largeModal').modal({show: true});
you could also just simulate a click on the modal trigger:
$('.mb-1').trigger('click');
of course, make sure this code comes after the markup with the modal. If that's not possible, you'll have to wrap it in a doc.ready like
$(function(){
$('#largeModal').modal({show: true});
})
or
$(function(){
$('.mb-1').trigger('click');
})
again, this assumes jQuery is assigned as $ in your code.
solution2
0 2018-10-23 03:50:51
This is in plain vanilla JavaScript. If you put onload="callBack()" inside of your body tag, you can write a function to load the specific element (your modal in this case).
There are a variety of ways to do this. Most simply, you can select the element you want in a script tag and give it the style display: "inline" (or however you want it displayed). Note: you would have to make your modal hidden first by setting display: none
Example:
body:
<body onload="callBack()">
-elements here-
</body>
script:
<script>
var callBack = function() {
document.querySelector("#largeModal").style.display = "inline";
}
</script>
Hope this helps :)
solution3
0 2018-10-23 04:24:32
These solutions will work:
<body onload="script();">
or
document.onload = function ...
or even
window.onload = function ...
Note that the last option is a better way to go since it is unobstrusive and is considered more standard .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.