How to Automatically Launch Bootstrap Modals upon Page Load?-JS Tutorial-php.cn

How to Automatically Launch Bootstrap Modals upon Page Load?

Mary-Kate Olsen

Release： 2024-10-19 16:00:31

Original

1060 people have browsed it

How to Automatically Launch Bootstrap Modals upon Page Load?

Launch Bootstrap Modal Automatically upon Page Load

The Bootstrap documentation provides a solution for launching modals upon page load using JavaScript. However, for those unfamiliar with the language, the implementation can be challenging.

One straightforward method is to use the jQuery load event within the document head section. By wrapping the desired modal within this event, it will automatically appear upon page load:

<code class="javascript">$(window).on('load', function() {
    $('#myModal').modal('show');
});</code>

Copy after login

Here's an example of how to use this code:

<code class="html"><head>
    <script>
        $(window).on('load', function() {
            $('#myModal').modal('show');
        });
    </script>
</head>
<body>
    <div class="modal" id="myModal">...</div>
</body></code>

Copy after login

Despite using the load event, you can still launch the modal within the page using the following HTML:

<code class="html"><a class="btn" data-toggle="modal" href="#myModal">Launch Modal</a></code>

Copy after login

By following these instructions, users can easily launch Bootstrap modals either automatically upon page load or via a designated link within the page.

The above is the detailed content of How to Automatically Launch Bootstrap Modals upon Page Load?. For more information, please follow other related articles on the PHP Chinese website!