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

青灯夜游
发布: 2021-12-06 19:00:39
转载
2128명이 탐색했습니다.

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 完整示例

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



  
    
    
    
    
    
    模态框
  
登录后复制

1.png

2.2 静态背景

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

相关标签:
来源:juejin.cn
본 웹사이트의 성명
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
더>
最新下载
더>
网站特效
网站源码
网站素材
프론트엔드 템플릿
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!