首页 >web前端 >js教程 >如何在没有 JavaScript 的情况下在页面加载时自动显示 Bootstrap 模式?

如何在没有 JavaScript 的情况下在页面加载时自动显示 Bootstrap 模式?

Patricia Arquette
Patricia Arquette原创
2024-10-19 15:57:30957浏览

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

在没有 JavaScript 知识的情况下在页面加载时启动 Bootstrap 模态

Bootstrap 文档建议使用 JavaScript 启动模态,但这对于那些不熟悉该语言的人。但是,即使不熟练使用 JavaScript,也可以在页面加载时启动模式。

解决方案:

要在页面加载时立即显示模式,请将其嵌入 jQuery 加载中文档头部的事件:

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

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>

此代码确保 ID 为“myModal”的模态框一旦出现页面加载。

附加说明:

  • 您仍然可以通过添加如下链接来手动启动模式:
<code class="html"><a class="btn" data-toggle="modal" href="#myModal">Launch Modal</a></code>
  • 此方法无需任何 JavaScript 依赖即可工作,非常适合那些喜欢避免编码或编码知识有限的人。

以上是如何在没有 JavaScript 的情况下在页面加载时自动显示 Bootstrap 模式?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn