Modal Show on page load

Question

Bootstrap modal work with an anchor tag if we click on it then modal appears. I want it to appear it while we load a page. What should I do. Here is my code.

    <a class="popup-trigger" href="#my-popup">Open Popup</a>
    <div id="my-popup" class="popup">My Popup</div>

Now if we click on this first anchor tag the modal will be open. I want this to open automatically while loading a page. Thanks.

when the page gets load,show the modal using `$("#my-popup").modal(show)` — Raviteja, Mar 03 '16 at 09:26
Possible duplicate of [Launch Bootstrap Modal on page load](http://stackoverflow.com/questions/10233550/launch-bootstrap-modal-on-page-load) — Ravi Hirani, Mar 03 '16 at 09:57

Thlbaut · Accepted Answer · 2016-03-03T09:42:17.950

2

Manually open a modal :

<script type="text/javascript">
    $(document).ready(function(){
        $('#my-popup').modal({
            show: true
        });
    });
</script>

or

<script type="text/javascript">
    $(document).ready(function(){
        $('#my-popup').modal('show');
    });
</script>

Documentation : http://getbootstrap.com/javascript/#modals-usage

edited Mar 03 '16 at 09:42

answered Mar 03 '16 at 09:26

Thlbaut

649
7
25

score 0 · Answer 2 · answered Mar 03 '16 at 09:28

What you are looking for is on document ready.

$(document).on('ready', function(){
    $('#my-popup').modal('show');
});

This basically shows the modal without needed to click it

An example can be seen here of what you can do: http://getbootstrap.com/javascript/#js-programmatic-api

Modal Show on page load

2 Answers2