当前位置： 首页 > news >正文

【Bootstrap V4系列】学习入门教程之 组件-模态框（Modal）

news 2025/7/12 15:32:52

Bootstrap V4系列 学习入门教程之 组件-模态框（Modal）

  • 模态框（Modal）
    • 一、How it works
    • 二、Examples
      • 2.1 Live demo 现场演示
      • 2.2 Static backdrop 静态背景
      • 2.3 Scrolling long content 滚动长内容
      • 2.4 Vertically centered 垂直居中
      • 2.5 Varying modal content 不同的模态内容
    • 三、Optional sizes 可选尺寸

模态框（Modal）

使用Bootstrap的JavaScript模态插件为您的网站添加对话框，用于灯箱、用户通知或完全自定义的内容。

一、How it works

在开始使用Bootstrap的模态组件之前，请务必阅读以下内容。

  • 模态是用HTML、CSS和JavaScript构建的。它们位于文档中的其他所有内容之上，并从<body>中删除滚动，以便模态内容滚动。
  • 点击模态“背景”将自动关闭模态。
  • Bootstrap一次只支持一个模态窗口。嵌套模态不受支持，因为我们认为它们的用户体验很差。
  • 模态使用position:fixed，这有时会对其呈现有点挑剔。只要有可能，请将模态HTML放置在顶级位置，以避免其他元素的潜在干扰。在将.model嵌套到另一个固定元素中时，您可能会遇到问题。
  • 再次，由于position:fixed，在移动设备上使用modals有一些注意事项。有关详细信息，请参阅我们的浏览器支持文档。
  • 由于HTML5如何定义其语义，自动聚焦HTML属性在Bootstrap模式中没有效果。为了达到相同的效果，请使用一些自定义JavaScript：
$('#myModal').on('shown.bs.modal', function () {$('#myInput').trigger('focus')
})

在页面展示使用效果：

在这里插入图片描述

二、Examples

2.1 Live demo 现场演示

通过单击下面的按钮切换工作模式演示。它将从页面顶部滑下并淡入。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Launch demo modal
</button><!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">Modal title</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body">...</div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div>
</div>

在这里插入图片描述

2.2 Static backdrop 静态背景

当背景设置为静态时，单击外部时模式不会关闭。单击下面的按钮进行尝试。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">Launch static backdrop modal
</button><!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="staticBackdropLabel">Modal title</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body">...</div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Understood</button></div></div></div>
</div>

在这里插入图片描述

2.3 Scrolling long content 滚动长内容

当modal对于用户的视口或设备来说太长时，它们会独立于页面本身滚动。试试下面的演示，看看我们的意思。

在这里插入图片描述

您还可以创建一个可滚动的模态，通过将.modal-dialog-scrollable 可滚动添加到.modal-dialog 对话框中来滚动模态体。

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">...
</div>

在这里插入图片描述

2.4 Vertically centered 垂直居中

将.modal-dialog-centered居中添加到.modal-dialog 对话框中，以使模态垂直居中。

<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">...
</div><!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">...
</div>
  • Vertically centered modal

在这里插入图片描述

  • Vertically centered scrollable modal

在这里插入图片描述

2.5 Varying modal content 不同的模态内容

有一堆按钮都触发相同的模式，但内容略有不同吗？使用event.relatedTarget和HTML data-*属性（可能通过jQuery）根据单击的按钮改变模式的内容。

下面是一个实时演示，后面是HTML和JavaScript示例。

HTML

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button><div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">New message</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body"><form><div class="form-group"><label for="recipient-name" class="col-form-label">Recipient:</label><input type="text" class="form-control" id="recipient-name"></div><div class="form-group"><label for="message-text" class="col-form-label">Message:</label><textarea class="form-control" id="message-text"></textarea></div></form></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Send message</button></div></div></div>
</div>

JavaScript

$('#exampleModal').on('show.bs.modal', function (event) {var button = $(event.relatedTarget) // Button that triggered the modalvar recipient = button.data('whatever') // Extract info from data-* attributes// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.var modal = $(this)modal.find('.modal-title').text('New message to ' + recipient)modal.find('.modal-body input').val(recipient)
})

页面展示效果：

在这里插入图片描述

点击按钮@mdo，页面展示效果：

在这里插入图片描述

点击按钮@fat，页面展示效果：

在这里插入图片描述
点击按钮@getbootstrap，页面展示效果：

在这里插入图片描述

三、Optional sizes 可选尺寸

modal有三种可选大小，可以通过放置在.modal-dialog 对话框上的修饰符类获得。这些大小在某些断点处生效，以避免在较窄的视口上出现水平滚动条。

在这里插入图片描述

我们没有修饰符类的默认模态构成了“中等”大小的模态。

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
  • Extra large modal

在这里插入图片描述

  • Large modal

在这里插入图片描述

  • Small modal

在这里插入图片描述

默认模态构成了“中等”大小的模态

在这里插入图片描述

http://www.dtcms.com/a/186562.html

相关文章：

  • Hugging Face推出了一款免费AI代理工具，它能像人类一样使用电脑
  • Elasticsearch 字段映射与数据类型
  • 物理：海市蜃楼是宇宙背景辐射吗？
  • [Java][Leetcode middle] 121. 买卖股票的最佳时机
  • 汽车紧固件涂层18问：看敦普无铬锌铝涂料如何为螺丝防锈防腐
  • 遭遇DDoS攻击为什么不能反击回去？
  • MATLAB复制Excel数据到指定区域
  • Egg.js知识框架
  • 塔能智能照明方案：点亮重庆某县节能落地
  • Ollama本地部署
  • 深度学习---常用优化器
  • 在嵌入式调试中IAR提示Fatal error: Failed connecting to probe Session aborted!怎么回事？怎么解决？
  • 【软考-高级】【信息系统项目管理师】论文写作注意事项及2014年至2024年历年论文题目汇总
  • Docker快速入门与应用
  • AD开启交叉选择功能，只选中器件，不选中网络、焊盘
  • TestNG接口自动化
  • h5移动端适配-dvh
  • SVN 中文路径访问报错（权限已正确分配）
  • YAFFS2 文件系统的 `yaffs_dev` 数据结构详解
  • UE RPG游戏开发练手 第二十二课 卸下手上武器
  • 蓝牙AVDTP协议概述
  • WSF12N15 MOS 管在筋膜枪中的高效应用
  • 【C++】语言深处的“精灵”：探索内存的奥妙
  • 【日撸 Java 三百行】Day 11（顺序表（一））
  • Python_SSE案例实现
  • PostgreSQL 中的序列（Sequence）
  • 深度解析Crawl4AI：面向大模型的新一代智能爬虫
  • 【合新通信】无人机天线拉远RFOF（射频光纤传输）解决方案
  • 学习黑客BitLocker与TPM详解
  • 【文献分享】机遇还是挑战：数字化转型对农业企业经营绩效的影响