如何为非 JavaScript 用户在页面加载时自动启动 Bootstrap Modal？-js教程-PHP中文网

如何为非 JavaScript 用户在页面加载时自动启动 Bootstrap Modal？

Mary-Kate Olsen

发布： 2024-10-19 15:58:30

原创

624 人浏览过

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

为非 JavaScript 用户在页面加载时自动启动 Bootstrap 模态

Bootstrap 文档建议使用 JavaScript 使用以下语法启动模态：

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

登录后复制

对于那些不熟悉 JavaScript 的人来说，这可能是一项艰巨的任务。这是一个适合初学者的解决方案，使您能够在页面加载时立即启动模式，而无需任何 JavaScript 知识：

将模式包装在 jQuery 加载事件中：

在中在 HTML 文档的部分中，添加以下代码：

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

登录后复制

包含模式的 HTML：

在您的 HTML 文档中，添加以下代码来定义模式：

<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>

登录后复制

此代码定义了一个带有页眉、正文和页脚的简单模式对话框。您可以根据需要自定义内容。

添加这些元素后，页面加载时会自动出现模态框。

注意：您仍然可以手动启动模态框使用具有以下语法的链接：

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

登录后复制

以上是如何为非 JavaScript 用户在页面加载时自动启动 Bootstrap Modal？的详细内容。更多信息请关注PHP中文网其他相关文章！