How to Display a Bootstrap Modal Automatically on Page Load Without JavaScript?

Launching Bootstrap Modal on Page Load Without JavaScript Knowledge

The Bootstrap documentation advises using JavaScript to launch a modal, but it can be daunting for those unfamiliar with the language. However, launching a modal on page load is possible even without JavaScript proficiency.

Solution:

To display a modal immediately upon page load, embed it within a jQuery load event in the document's head section:

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

HTML Code:

<code class="html"><div class="modal hide fade" id="myModal">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div></code>

This code ensures that the modal with the ID "myModal" appears as soon as the page loads.

Additional Notes:

• You can still launch the modal manually by adding a link like this:

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

• This method works without any JavaScript dependencies and is ideal for those who prefer to avoid coding or have limited knowledge of it.

The above is the detailed content of How to Display a Bootstrap Modal Automatically on Page Load Without JavaScript?. For more information, please follow other related articles on the PHP Chinese website!