Home >Web Front-end >JS Tutorial >How to Automatically Launch Bootstrap Modals upon Page Load?

How to Automatically Launch Bootstrap Modals upon Page Load?

Mary-Kate OlsenOriginal: 2024-10-19 16:00:311065browse

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>

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>

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>

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!

JavaScript jquery bootstrap html for using Event this

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to Launch a Bootstrap Modal Automatically on Page Load?Next article：How to Launch a Bootstrap Modal Automatically on Page Load?

See more

How to Automatically Launch Bootstrap Modals upon Page Load?

Related articles