How to Automatically Launch Bootstrap Modal on Page Load for Non-JavaScript Users?

Launch Bootstrap Modal Automatically on Page Load for Non-JavaScript Users

The Bootstrap documentation suggests using JavaScript to launch modals using the following syntax:

<code class="javascript">$('#myModal').modal(options)</code>

For those unfamiliar with JavaScript, this can be a daunting task. Here's a beginner-friendly solution that enables you to launch a modal immediately on page load without any JavaScript knowledge:

1. Wrap the modal within a jQuery load event:

In the section of your HTML document, add the following code:

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

2. Include the HTML for the modal:

Within your HTML document, add the following code to define the modal:

<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 defines a simple modal dialog with a header, body, and footer. You can customize the content as desired.

After adding these elements, the modal will automatically appear when the page loads.

Note: You can still launch the modal manually using a link with the following syntax:

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

The above is the detailed content of How to Automatically Launch Bootstrap Modal on Page Load for Non-JavaScript Users?. For more information, please follow other related articles on the PHP Chinese website!