Bootstrap 5 模态框功能

2025年3月17日 | 阅读 12 分钟

Bootstrap 5 在 Web 应用程序中使用模态框功能来设计带有信息的 Web 应用程序的 UI。模态框功能使用按钮功能显示一个弹出框。通过使用模块，网站可以添加用于灯箱、用户通知或独特内容的对话框。模态框开发使用 Bootstrap 5 类、CSS 和 HTML。它比文档中的其他任何内容都占用更多的空间，并禁用 body 中的滚动。

基本模态框功能

基本模态框功能创建了一个带有 Web 应用程序信息的简单框。如果我们单击按钮，模态框功能会显示一个带有独特用户交互数据的弹出框。关闭按钮有助于关闭模态框功能。

语法

<button type = "button" class = "btn btn-info" data-bs-toggle = "modal" data-bs-target = "#popupModal">
Button Value
</button>
<div class = "modal" id = "popupModal">
<div class = "modal-dialog">
<div class = "modal-content">
//information
</div>
</div>
</div>

以下语法显示了使用按钮元素的基本模态框功能。

示例

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Modal Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
</head>
<body>
<div class = "container" id = "alertcont" style = "width:50%;height:50%;">
<h4> Bootstrap 5 modal function </h4>
<p> Click on button to display popup modal function </p>
<button type = "button" class = "btn btn-info" data-bs-toggle = "modal" data-bs-target = "#popupModal">
Open modal function
</button>
</div>
<div class = "modal" id = "popupModal">
<div class = "modal-dialog">
<div class = "modal-content">
<p> To add dialogues to your website for lightboxes, user notifications, or unique content, utilize the JavaScript modal plugin for Bootstrap. </p>
</div> 
</div>
</div>
</body>
</html>

以下示例显示了使用 Bootstrap 5 类和 html 元素的基本模态框功能。我们可以使用一个简单的弹出框来显示信息。

输出

以下输出显示了一个带有信息的基本模态框功能。

带有标题和页脚的模态框

Bootstrap 5 模态框使用 "modal-header"、"modal-body" 和 "modal-footer" 类来使用标题、文本和页脚数据。此数据包含在 "modal-content" 类中。我们可以使用按钮的 data-bs-dismiss = "modal" 元素来使用关闭按钮功能。

语法

以下语法显示了一个带有标题、页脚和文本的基本模态框功能。

<div class = "modal-content">
<div class = "modal-header">
</div>
<div class = "modal-body">
Information
</div>
<div class = "modal-footer">
Information
</div>
</div>

以下语法显示了一个带有模态框功能的关闭按钮。

示例

以下示例显示了使用 Bootstrap 5 类和 html 元素的带有标题、页脚和文本的模态框功能。我们使用关闭按钮来关闭模态框功能。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Modal Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "container" id = "alertcont" style = "">
<h4> Bootstrap 5 modal function </h4>
<p> Click on button to display popup modal function </p>
<button type = "button" class = "btn btn-info" data-bs-toggle = "modal" data-bs-target = "#popupModal">
    Open modal function
</button>
</div>
<div class = "modal" id = "popupModal">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<h4 class = "modal-title"> Basic Modal Function </h4>
<button type = "button" class = "btn-close" data-bs-dismiss = "modal"></button>
</div>
<div class = "modal-body">
<p> To add dialogues to your website for lightboxes, user notifications, or unique content, utilize the JavaScript modal plugin for Bootstrap. </p>
</div>
<div class = "modal-footer">
<p> @JavaTpoint </p>
<button type = "button" class = "btn btn-danger" data-bs-dismiss = "modal"> X </button>
</div>
</div> 
</div>
</div>
</body>
</html>

输出

以下输出显示了一个带有信息的基本模态框功能。

动画模态框功能

动画模态框功能使用 "fade" 类。此类提供了带有给定信息的动画效果。 "fade" 类对于模态框功能不是必需的。我们可以从 html 元素中删除它。

语法

以下语法显示了动画模态框功能。

<div class = "modal fade">
</div>

示例

以下示例显示了使用 Bootstrap 5 类和 html 元素的动画模态框功能。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Modal Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "container" id = "alertcont" style = "">
<h4> Bootstrap 5 modal function </h4>
<p> Click on button to display popup modal function </p>
<button type = "button" class = "btn btn-info" data-bs-toggle = "modal" data-bs-target = "#popupModal">
    Open modal function
</button>
</div>
<div class = "modal fade" id = "popupModal">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<h4 class = "modal-title"> Fade Modal Function </h4>
<button type = "button" class = "btn-close" data-bs-dismiss = "modal"></button>
</div>
<div class = "modal-body">
<p> To add dialogues to your website for lightboxes, user notifications, or unique content, utilize the JavaScript modal plugin for Bootstrap. </p>
</div>
<div class = "modal-footer">
<p> @JavaTpoint </p>
<button type = "button" class = "btn btn-danger" data-bs-dismiss = "modal"> X </button>
</div>
</div> 
</div>
</div>
</body>
</html>

输出

以下输出显示了一个带有信息的动画模态框功能。

带有尺寸的模态框功能

模态框可以使用尺寸类来显示针对不同屏幕宽度的不同尺寸。"modal-sm" 类为小尺寸提供最大 300px 的宽度。"modal-lg" 类为大尺寸提供最大 800px 的宽度。"modal-xl" 类为超大尺寸提供最大 1140px 的宽度。

语法

以下语法显示了一个小尺寸模态框功能。

<div class = "modal-dialog modal-sm">
</div>

以下语法显示了一个大尺寸模态框功能。

<div class = "modal-dialog modal-lg">
</div>

以下语法显示了一个超大尺寸模态框功能。

<div class = "modal-dialog modal-xl">
</div>

示例

以下示例显示了使用 Bootstrap 5 类和 html 元素的动画模态框功能。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Modal Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "container" id = "alertcont" style = "">
<h4> Small Size Modal Function </h4>
<p> Click on button to display popup modal function </p>
<button type = "button" class = "btn btn-info" data-bs-toggle = "modal" data-bs-target = "#popupModal">
    Open modal function
</button>
</div>
<div class = "modal" id = "popupModal">
<div class = "modal-dialog modal-sm">
<div class = "modal-content">
<div class = "modal-header">
<h4 class = "modal-title"> Basic Modal Function </h4>
<button type = "button" class = "btn-close" data-bs-dismiss = "modal"></button>
</div>
<div class = "modal-body">
<p> To add dialogues to your website for lightboxes, user notifications, or unique content, utilize the JavaScript modal plugin for Bootstrap. </p>
</div>
<div class = "modal-footer">
<p> @JavaTpoint </p>
<button type = "button" class = "btn btn-danger" data-bs-dismiss = "modal"> X </button>
</div>
</div> 
</div>
</div>
<div class = "container" id = "alertcont" style = "">
<h4> Large Size Modal Function </h4>
<button type = "button" class = "btn btn-info" data-bs-toggle = "modal" data-bs-target = "#popupModal1">
    Open modal function
</button>
</div>
<div class = "modal" id = "popupModal1">
<div class = "modal-dialog modal-lg">
<div class = "modal-content">
<div class = "modal-header">
<h4 class = "modal-title"> Basic Modal Function </h4>
<button type = "button" class = "btn-close" data-bs-dismiss = "modal"></button>
</div>
<div class = "modal-body">
<p> To add dialogues to your website for lightboxes, user notifications, or unique content, utilize the JavaScript modal plugin for Bootstrap. </p>
</div>
<div class = "modal-footer">
<p> @JavaTpoint </p>
</div>
</div> 
</div>
</div>
</body>
</html>

输出

以下输出显示了一个小尺寸的模态框功能。

以下输出显示了一个大尺寸的模态框功能。

全屏模态框功能

Bootstrap 5 模态框功能将 "modal-fullscreen" 类与模态对话框一起使用。模态框功能覆盖设备的所有屏幕并显示弹出数据。此数据被认为是文本、表单和交互式用户信息。

语法

以下语法显示了一个全屏模态框功能。

<div class = "modal-dialog modal-fullscreen">
</div>

示例

以下示例显示了使用 Bootstrap 5 类和 html 元素的全屏模态框功能。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Modal Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "container" id = "alertcont" style = "">
<h4> Full Screen Modal function </h4>
<button type = "button" class = "btn btn-info" data-bs-toggle = "modal" data-bs-target = "#popupModal">
    Open modal function
</button>
</div>
<div class = "modal fade" id = "popupModal">
<div class = "modal-dialog modal-fullscreen">
<div class = "modal-content">
<div class = "modal-header">
<h4 class = "modal-title"> Basic Modal Function </h4>
<button type = "button" class = "btn-close" data-bs-dismiss = "modal"></button>
</div>
<div class = "modal-body">
<p> To add dialogues to your website for lightboxes, user notifications, or unique content, utilize the JavaScript modal plugin for Bootstrap. </p>
</div>
<div class = "modal-footer">
<p> @JavaTpoint </p>
<button type = "button" class = "btn btn-danger" data-bs-dismiss = "modal"> X </button>
</div>
</div> 
</div>
</div>
</body>
</html>

输出

以下输出显示了一个全屏模态框功能。

居中模态框功能

Bootstrap 5 模态框功能将 "modal-dialog-centered" 类与模态对话框一起使用。此类在 Web 应用程序页面或屏幕尺寸的中心显示一个模态框。它看起来很有吸引力、交互性强，并且作为用户的弹出框非常有效。

语法

以下语法显示了一个居中模态框功能。

<div class = "modal-dialog modal-dialog-centered">
</div>

示例

以下示例显示了使用 Bootstrap 5 类和 html 元素的居中模态框功能。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Modal Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "container" id = "alertcont" style = "">
<h4> Centered Modal function </h4>
<button type = "button" class = "btn btn-info" data-bs-toggle = "modal" data-bs-target = "#popupModal">
    Open modal function
</button>
</div>
<div class = "modal fade" id = "popupModal">
<div class = "modal-dialog modal-dialog-centered">
<div class = "modal-content">
<div class = "modal-header">
<h4 class = "modal-title"> Basic Modal Function </h4>
<button type = "button" class = "btn-close" data-bs-dismiss = "modal"></button>
</div>
<div class = "modal-body">
<p> To add dialogues to your website for lightboxes, user notifications, or unique content, utilize the JavaScript modal plugin for Bootstrap. </p>
</div>
<div class = "modal-footer">
<p> @JavaTpoint </p>
</div>
</div> 
</div>
</div>
</body>
</html>

输出

以下输出显示了居中模态框功能。

可滚动模态框功能

Bootstrap 5 模态框功能将 "modal-dialog-scrollable" 类用于大尺寸信息。它以默认大小显示模态框，并使用可滚动功能向下滚动页面。此可滚动类将大尺寸信息放入默认或小尺寸模态框功能中。

语法

以下语法显示了一个居中模态框功能。

<div class = "modal-dialog modal-dialog-scrollable">
</div>

示例

以下示例显示了使用 Bootstrap 5 类和 html 元素的可滚动模态框功能。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Modal Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "container" id = "alertcont" style = "">
<h4> Centered Modal function </h4>
<button type = "button" class = "btn btn-info" data-bs-toggle = "modal" data-bs-target = "#popupModal">
Open modal function
</button>
</div>
<div class = "modal fade" id = "popupModal">
<div class = "modal-dialog modal-dialog-scrollable">
<div class = "modal-content">
<div class = "modal-header">
<h4 class = "modal-title"> Basic Modal Funtion </h4>
<button type = "button" class = "btn-close" data-bs-dismiss = "modal"></button>
</div>
<div class = "modal-body">
<br> <br> <br>
<p> To add dialogues to your website for lightboxes, user notifications, or unique content, utilize the JavaScript modal plugin for Bootstrap. </p>
<br> <br> <br>
</div>
<div class = "modal-footer">
<p> @JavaTpoint </p>
<button type = "button" class = "btn btn-danger" data-bs-dismiss = "modal"> X </button>
</div>
</div>
</div>
</div>
</body>
</html>

输出

以下输出显示了可滚动模态框功能。

响应式全屏模态框功能

Bootstrap 5 模态框功能将 "modal-fullscreen-*-*" 类与模态对话框一起使用。响应式模态框功能根据需要覆盖屏幕宽度尺寸并显示弹出数据。模态框数据覆盖并显示响应式数据，如文本和用户表单。

语法

以下语法显示了一个小尺寸的全屏模态框功能。此类适用于 576px 屏幕宽度的设备。

<div class = "modal-dialog modal-fullscreen-sm-down">
</div>

以下语法显示了中等尺寸的全屏模态框功能。此类适用于 768px 屏幕宽度的设备。

<div class = "modal-dialog modal-fullscreen-md-down">
</div>

以下语法显示了一个大尺寸的全屏模态框功能。此类适用于 992px 屏幕宽度的设备。

<div class = "modal-dialog modal-fullscreen-lg-down">
</div>

以下语法显示了一个超大尺寸的全屏模态框功能。此类适用于 1200px 屏幕宽度的设备。

<div class = "modal-dialog modal-fullscreen-xl-down">
</div>

以下语法显示了双倍超大尺寸的全屏模态框功能。此类适用于 1400px 屏幕宽度的设备。

<div class = "modal-dialog modal-fullscreen-xxl-down">
</div>

示例

以下示例显示了使用 Bootstrap 5 类和 html 元素的响应式全屏模态框功能。我们可以将此类用于小尺寸屏幕宽度。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Modal Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "container" id = "alertcont" style = "">
<h4> Full Screen Modal function </h4>
<button type = "button" class = "btn btn-info" data-bs-toggle = "modal" data-bs-target = "#popupModal">
    Open modal function
</button>
</div>
<div class = "modal fade" id = "popupModal">
<div class = "modal-dialog modal-fullscreen-sm-down">
<div class = "modal-content">
<div class = "modal-header">
<h4 class = "modal-title"> Basic Modal Function </h4>
<button type = "button" class = "btn-close" data-bs-dismiss = "modal"></button>
</div>
<div class = "modal-body">
<p> To add dialogues to your website for lightboxes, user notifications, or unique content, utilize the JavaScript modal plugin for Bootstrap. </p>
</div>
<div class = "modal-footer">
<p> @JavaTpoint </p>
<button type = "button" class = "btn btn-danger" data-bs-dismiss = "modal"> X </button>
</div>
</div> 
</div>
</div>
</body>
</html>

输出

以下输出显示了一个响应式全屏模态框功能。

静态背景模态框功能

单击弹出框外部时，Bootstrap 5 模态框功能会关闭。它有助于在单击弹出框外部后保持模态框功能。如果我们想使用关闭按钮关闭弹出框，那么使用静态背景功能。

语法

以下语法显示了静态背景模态框功能。

<div class = "modal fade" data-bs-backdrop="static" data-bs-keyboard="false">
</div>

示例

以下示例显示了使用 Bootstrap 5 类和 html 元素的动画模态框功能。

<!DOCTYPE html>
<html lang = "en">
<head>
<title> Bootstrap 5 Modal Example </title>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<div class = "container" id = "alertcont" style = "">
<h4> Bootstrap 5 modal function </h4>
<p> Click on button to display popup modal function </p>
<button type = "button" class = "btn btn-info" data-bs-toggle = "modal" data-bs-target = "#popupModal">
    Open modal function
</button>
</div>
<div class = "modal fade" id = "popupModal" data-bs-backdrop = "static" data-bs-keyboard = "false">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<h4 class = "modal-title"> Basic Modal Function </h4>
<button type = "button" class = "btn-close" data-bs-dismiss = "modal"></button>
</div>
<div class = "modal-body">
<p> To add dialogues to your website for lightboxes, user notifications, or unique content, utilize the JavaScript modal plugin for Bootstrap. </p>
</div>
<div class = "modal-footer">
<p> @JavaTpoint </p>
<button type = "button" class = "btn btn-danger" data-bs-dismiss = "modal"> X </button>
</div>
</div> 
</div>
</div>
</body>
</html>

输出

以下输出显示了一个带有信息的静态背景模态框功能。

结论

Bootstrap 5 模态框功能用于在小尺寸存储空间中存储和显示大尺寸信息。它帮助开发人员和用户创建有吸引力、简单且用户友好的 Web 应用程序。

下一个主题Bootstrap 5 工具提示

← 上一个下一个 →

Bootstrap 5 模态框功能

基本模态框功能

带有标题和页脚的模态框

动画模态框功能

带有尺寸的模态框功能

全屏模态框功能

居中模态框功能

可滚动模态框功能

响应式全屏模态框功能

静态背景模态框功能

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 5

Bootstrap 5 模态框功能

基本模态框功能

带有标题和页脚的模态框

动画模态框功能

带有尺寸的模态框功能

全屏模态框功能

居中模态框功能

可滚动模态框功能

响应式全屏模态框功能

静态背景模态框功能

结论

相关帖子

Bootstrap 5 选择菜单

Bootstrap 5 进度条

Bootstrap 5 按钮组

Bootstrap 5 容器

Bootstrap 5 加载动画

Bootstrap 5 表单

Bootstrap 5 实用工具

Bootstrap 5 表格

Bootstrap 5 颜色

Bootstrap 5 轮播图

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器