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

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

news 2025/5/14 11:28:25

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.xdnf.cn/news/412093.html

相关文章：

  • css 点击后改变样式
  • Megatron系列——张量并行
  • 我们来学mysql -- 安装8.4版本
  • 在CentOS 7上仅安装部署MySQL 8.0客户端
  • 将arduino开发的Marlin部署到stm32（3D打印机驱动）
  • 【GESP】C++三级练习 luogu-B2156 最长单词 2
  • NeurIPS 2025 截稿攻略
  • 无线传感器网络期末复习自整理资料（天大）
  • 【Game】Powerful——Hero Trial（11）
  • Windows下安装Docker Desktop到C盘以外的盘
  • 透视相机：创意摄影新体验，解锁照片无限可能
  • 计网第四次作业
  • MyBatis 一对多关联映射在Spring Boot中的XML配置
  • 北京市通州区经信局对新增通过国家级生成式人工智能及深度合成算法备案企业给予100w、20w一次性补贴
  • 【软考-软件设计师学习总结】- 计算机网络概述
  • MINIX 1.0 文件系统的实现(C/C++实现)
  • Lynx-字节跳动跨平台框架多端兼容Android， iOS， Web 原生渲染
  • Vue学习百日计划-Deepseek版
  • 残差网络(ResNet)
  • c/c++爬虫总结
  • docker使用过程中遇到概念问题
  • 线程的让位（Yield）
  • 修改linux同步时间
  • 潘大水库介绍
  • object的常用方法
  • MAC-OS X 命令行设置IP、掩码、网关、DNS服务器地址
  • 5月12日信息差
  • 为什么 cout＜＜“中文你好“ 能正常输出中文
  • Django 项目的 models 目录中，__init__.py 文件的作用
  • [ linux-系统 ] 自动化构建工具makefile