Web Front-endBootstrap TutorialHow to use modal boxes in Bootstrap? A brief analysis of the usage of Modal components
How to use modal box in
Bootstrap? The following article will introduce to you the usage of the Modal component of the Bootstrap5 modal pop-up box. I hope it will be helpful to you!
1 How the Bootstrap5 modal pop-up box works
Use Bootstrap's JavaScript mode plug-in to add dialog boxes to the site for light boxes, user notifications, or Fully customizable content. [Related recommendations: "bootstrap Tutorial"]
- The interactive window is built with HTML, CSS and JavaScript. They sit above any other content in the file and remove scrolling from the body so that the interactive viewport's content scrolls.
- Clicking the "backdrop" of the interactive window will automatically close the interactive window.
- Bootstrap only supports one interactive window at a time. Nested interactive windows are not supported because we consider nested interactive windows to be a poor user experience.
- The interactive window uses position: fixed, which is a bit special in rendering and presentation. Place your interactive viewport HTML at the top level whenever possible to avoid potential interference from other elements. You may run into problems when adding a .modal inside another fixed element.
- Because of position: fixed, there are some additional instructions for using interactive windows on mobile devices.
- According to the way HTML5 defines semantics, the autofocus HTML attribute has no impact on Bootstrap interactive windows. To achieve the same effect, use some custom JavaScript: the autofocus HTML attribute
2 Full example
2.1 Full example
Toggle by clicking the button below Dynamic window rendering. It will slide down from the top of the page and fade in. Click the close button or click the background area to close the pop-up window.
<!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="确认提示">确认提示</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>
2.2 Static background
When the background is set to static, the interactive window will not be closed by clicking on the background. Just add data-bs-backdrop="static" data-bs-keyboard="false" to <div class="modal fade">. <p>Replace the code </p><pre class='brush:php;toolbar:false;'> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"></pre><p> in the 26.2.1 example with </p><pre class='brush:php;toolbar:false;'><div class="modal fade" id="exampleModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"></pre><p> There is no difference in appearance. Just click on the background and the pop-up box will no longer be closed. </p>
<h1 id="Scrolling-long-content">3 Scrolling long content</h1>
<h2 id="Using-browser-scroll-bars">3.1 Using browser scroll bars</h2>
<p>By default, when the user's dynamic windows become too long, their scrolling is independent of On the page itself, vertical scroll bars will be enabled on the browser. </p><pre class='brush:php;toolbar:false;'><!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="#exampleModalLong">
滚动弹窗演示
</button>
<div class="modal fade" id="exampleModalLong" tabindex="-1" aria-labelledby="exampleModalLongTitle"
aria-hidden="true">
<div>
<div>
<div>
<h5 id="万不看脸社交的年轻人">3300万不看脸社交的年轻人</h5>
<button type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div>
<p>Z世代正在成为全球消费的生力军。这批出生于1995-2009年间的移动互联网原住民，在经济快速增长、多元文化碰撞、信息资讯空前繁盛的世界中，形成了既包容又挑剔的审美倾向，他们将个人兴趣与好恶作为社交的基础原则，进而导致新一代社交的“部落化”与“孤岛化”趋势。</p>
<p>这种由Z世代主导的全新数字行为方式，正在大张旗鼓地改造全球移动应用的形态，给沉寂已久的移动社交应用生态带来新的可能性。</p>
<p>长久以来，微信稳坐“社交霸主”地位的核心原因，是在于它巧妙地将熟人社会生态搬到线上并实现推广，换言之，微信解决的是生存问题。但当下年轻人有着更复杂的陪伴、表达与个人认同需求，需要寻求其它途径实现，这种需求反映到社交市场后，带来了新一代社交产品的个性化。</p>
<p>比如Soul，这个推出不到5年的社交产品在年轻群体中迅速打开市场，Soul的DAU已达千万量级，同比增长94.4%，其中73.9%的DAU是Z世代。同时也凭借全新的社交玩法达成3300万MAU。更值得关注的是，从2020年7月开始至今，用户增长速度平均保持在105%以上。根据腾讯智库数据，Soul在95后的渗透率达到了行业前三，TGI指标维度(Target Group Index，用于衡量用户偏好度)上Soul在95后群体中达到了127，远超过100的平均值，足以反映Soul在95后群体中的受欢迎程度。</p>
<p>Soul的成长路径，不依赖于既有关系链的转移或映射，也没有通过KOL或头部主播吸粉，而是平台完成冷启动，这种形态在海内外都找不到可对标的先例。这个年轻的社交平台是如何长成的？没有引入线下关系，Soul如何确保留存率和活跃度？</p>
<p>“反传统”的运营策略</p>
<p>纵观全球社交行业，从关系链闭环的⻆度来看，社交产品类型主要有三种。</p>
<p>第一种是把已有的外部关系链复制到社交产品中，主要是手机通讯录、邮箱等线下关系的映射，Facebook、微信、QQ都属于此类；第二种是基于地理位置进行匹配，比如“附近的人”、“同城交友”，上一代陌生人社交产品主要沿用这一路径；第三种是通过话题、内容或兴趣进行聚合，比如前段时间爆火的Clubhouse。</p>
<p>但Soul不属于上述任何一种。用户首次进入Soul时，要先打造一个全新身份、进行“灵魂测试”、最后打上个性化标签；基于这个虚拟的线上形象，用户可以进行自我表达、认知他人、探索世界、交流兴趣和观点、获得情感支持和认同感、从交流中获取信息和有质量的新关系。</p>
</div>
<div>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<script src="../bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html></pre><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/628/760/493/1638788219753440.png?x-oss-process=image/resize,p_40" class="lazy" title="163878823469018How to use modal boxes in Bootstrap? A brief analysis of the usage of Modal components" alt="How to use modal boxes in Bootstrap? A brief analysis of the usage of Modal components"></p>
<h2 id="Use-the-pop-up-scroll-bar">3.2 Use the pop-up scroll bar</h2>
<p>You can add modal-dialog-scrollable to modal-dialog to create a pop-up window with a scrollable body . </p>
<p>Replace </p><pre class='brush:php;toolbar:false;'><div class="modal-dialog"></pre><p> in the 26.3.1 example with </p><pre class='brush:php;toolbar:false;'><div class="modal-dialog modal-dialog-scrollable"></pre><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/628/760/493/1638788219753440.png?x-oss-process=image/resize,p_40" class="lazy" title="163878823834615How to use modal boxes in Bootstrap? A brief analysis of the usage of Modal components" alt="How to use modal boxes in Bootstrap? A brief analysis of the usage of Modal components"></p>
<h1 id="Vertically-center">4 Vertically center </h1>
<p>Add <code> modal-dialog-centered to modal-dialog to vertically center the interactive window.
This setup is relatively simple, just make the following changes.
<div class="modal-dialog modal-dialog-centered">
The bottom one is with a scroll bar
复制代码The above example may not be visible because only part of the window is selected in the screenshot. The following two pictures are 26.2.1 Demonstration of the window. The display effect after raising the height, and the display effect after adding vertical centering.
5 Multiple modal box switching
Switch between multiple modalities and cleverly place data -bs-target and data-bs-Toggle attributes. For example, you can toggle password reset mode within an open login mode. Please note that multiple modals cannot be open at the same time. This method simply switches between two separate modalities.
For more knowledge about bootstrap, please visit: bootstrap basic tutorial! !
The above is the detailed content of How to use modal boxes in Bootstrap? A brief analysis of the usage of Modal components. For more information, please follow other related articles on the PHP Chinese website!
10款好看又实用的Bootstrap后台管理系统模板（快来下载）Aug 06, 2021 pm 01:55 PM一个好的网站，不能只看外表，网站后台同样很重要。本篇文章给大家分享10款好看又实用的Bootstrap后台管理系统模板，可以帮助大家快速建立强大有美观的网站后台，欢迎下载使用！如果想要获取更多后端模板，请关注php中文网后端模板栏目！
bootstrap与jquery是什么关系Aug 01, 2022 pm 06:02 PMbootstrap与jquery的关系是：bootstrap是基于jquery结合了其他技术的前端框架。bootstrap用于快速开发Web应用程序和网站，jquery是一个兼容多浏览器的javascript库，bootstrap是基于HTML、CSS、JAVASCRIPT的。
7款实用响应式Bootstrap电商源码模板（快来下载）Aug 31, 2021 pm 02:13 PM好看又实用的Bootstrap电商源码模板可以提高建站效率，下面本文给大家分享7款实用响应式Bootstrap电商源码，均可免费下载，欢迎大家使用！更多电商源码模板，请关注php中文网电商源码栏目！
8款Bootstrap企业公司网站模板（源码免费下载）Aug 24, 2021 pm 04:35 PM好看又实用的企业公司网站模板可以提高您的建站效率，下面PHP中文网为大家分享8款Bootstrap企业公司网站模板，均可免费下载，欢迎大家使用！更多企业站源码模板，请关注php中文网企业站源码栏目！
bootstrap中sm是什么意思May 06, 2022 pm 06:35 PM在bootstrap中，sm是“小”的意思，是small的缩写；sm常用于表示栅格类“.col-sm-*”，是小屏幕设备类的意思，表示显示大小大于等于768px并且小于992px的屏幕设备，类似平板设备。
bootstrap modal 如何关闭Dec 07, 2020 am 09:41 AMbootstrap modal关闭的方法：1、连接好bootstrap的插件；2、给按钮绑定模态框事件；3、通过“ $('#myModal').modal('hide');”方法手动关闭模态框即可。
bootstrap默认字体大小是多少Aug 22, 2022 pm 04:34 PMbootstrap默认字体大小是“14px”；Bootstrap是一个基于HTML、CSS、JavaScript的开源框架，用于快速构建基于PC端和移动端设备的响应式web页面，并且默认的行高为“20px”，p元素行高为“10px”。
bootstrap是免费的吗Jun 21, 2022 pm 05:31 PMbootstrap是免费的；bootstrap是美国Twitter公司的设计师“Mark Otto”和“Jacob Thornton”合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，开发完成后在2011年8月就在GitHub上发布了，并且开源免费。
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
SublimeText3 Linux new version
SublimeText3 Linux latest version
Notepad++7.3.1
Easy-to-use and free code editor
PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
Dreamweaver CS6
Visual web development tools
