Bootstrap中怎么使用模态框?Modal组件用法浅析

青灯夜游
发布: 2021-12-06 19:00:39
转载
2649人浏览过

bootstrap中怎么使用模态框?下面本篇文章给大家介绍一下bootstrap5模态弹框modal组件的用法,希望对大家有所帮助!

Bootstrap中怎么使用模态框?Modal组件用法浅析

1 Bootstrap5模态弹框工作原理

使用Bootstrap的JavaScript模式插件将对话框添加到站点中,用于灯箱、用户通知或完全自定义的内容。【相关推荐:《bootstrap教程》】

  • 互动视窗是用HTML、CSS和JavaScript构建的。它们位于文件中任何其他内容之上,并从body中删除滚动,以便互动视窗的内容滚动。
  • 点击互动视窗“backdrop”将自动关闭互动视窗。
  • Bootstrap一次只支持一个互动视窗。不支持嵌套互动视窗,因为我们认为嵌套互动视窗用户体验不佳。
  • 互动视窗使用position: fixed,在渲染呈现上会有点特别。尽可能将您的互动视窗HTML放置在顶级位置,以避免其他元素的潜在干扰。在另一个固定元素中内加入一个.modal的时候,你可能会遇到问题。
  • 由于position: fixed,在移动设备上使用互动视窗有一些附加说明。
  • 依据HTML5定义语义的方式,autofocus HTML属性对Bootstrap互动视窗没有影响。要达到同样的效果,请使用一些自定义JavaScript:the autofocus HTML attribute

2 完整示例

2.1 完整示例

通过点击下面的按钮切换动态视窗呈现。它将从页面顶部向下滑动并淡入。点击关闭按钮或者点击背景区域,弹出窗口关闭。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="../bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>模态框</title>
  </head>
  <body>
    <div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    删除内容
    </button>
    
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div>
    <div>
    <div>
      <h5 id="exampleModalLabel">确认提示</h5>
      <button type="button" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div>
      删除后不可恢复!
    </div>
    <div>
      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      <button type="button" class="btn btn-primary">继续删除</button>
    </div>
    </div>
    </div>
    </div>
        
      </div>
     <script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>
登录后复制

1.png

2.2 静态背景

当将背景设置为静态时,互动视窗不会因为点击背景而关闭。将data-bs-backdrop="static" data-bs-keyboard="false" 加入

登录后复制

6.png

更多关于bootstrap的相关知识,可访问:bootstrap基础教程!!

以上就是Bootstrap中怎么使用模态框?Modal组件用法浅析的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:掘金社区网
收藏 点赞
上一篇:Bootstrap中怎么添加列表?列表群组的用法浅析 下一篇:Bootstrap中怎么使用提示工具?提示组件用法浅析
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号