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?

If you are using `jQuery` use `$('#largeModal').modal('show')` — Yashwardhan Pauranik, Oct 23 '18 at 03:11
add class="modal show" please refer > https://stackoverflow.com/questions/10233550/launch-bootstrap-modal-on-page-load — Arvind Shinde, Oct 23 '18 at 03:17
@YashwardhanPauranik no jQuery tag but please use comments for clarification, not answers. — stealththeninja, Oct 23 '18 at 04:39

score 0 · Accepted Answer · answered Oct 23 '18 at 03:10

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.

score 0 · Answer 2 · answered Oct 23 '18 at 03:50

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 :)

score 0 · Answer 3 · answered Oct 23 '18 at 04:24

0

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.

answered Oct 23 '18 at 04:24

Maarti

3,600
4
17
34

how to trigger modal on page load

3 Answers3