Bootstrap 简明教程
Bootstrap - Modals
此章节讨论 Bootstrap 的组件模态框。模态框是一种用于在一个可自定义的对话框框中显示内容或消息的组件类型，该对话框框叠加在当前页面上。
-
模态框可用于多种用途，例如显示图像、视频、表单和通知。
-
模态框非常适合创建用户友好且交互式的界面，因为它们允许用户在不离开当前页面情况下与内容进行交互。
-
它们还可以使用 Bootstrap 的内置类和 JavaScript 插件轻松自定义。
-
当模态框背景被点击时，模态框会自动关闭。
-
Bootstrap 一次只支持一个模态框窗口。
-
建议避免在另一个元素中嵌套 .modal 。相反，将您的模态框放在顶级位置以避免其他元素的干扰。
-
在移动设备上使用模态框会因为 position: fixed 而受到某些限制。
-
模态组建的动画效果取决于 prefers-reduced-motion 媒体查询。
-
由于 HTML5 定义了其语义，自动聚焦 HTML 特性在 Bootstrap 模态框中无效。通过使用专门制作的 JavaScript 代码可以达到类似的结果。
Modal components
Bootstrap 中模态组件如下所示：
-
Modal header - 包含标题和关闭按钮。
-
Modal body - 包含模态内容。
-
Modal footer - 包含可能对用户可用的按钮或其他操作。
-
Modal backdrop - 当模态处于活动状态时覆盖背景的半透明覆盖层。
-
Modal content - 容纳页眉、正文和页脚组件的容器。
-
Modal dialog - 定义模态大小和其中内容位置的最外层容器。
我们来看一个基本模态的例子：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Modal</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="text-align: center;">
<div class="container mt-3" style="width: 700px;">
<h4>Static Modal</h4>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch modal</button>
<!-- Modal -->
<div class="modal" id="exampleModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Modal title</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body"><strong><h4>Example of a Static Modal</h4></strong></div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Save</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Static backdrop
当背景为静态时，单击模态外部不会关闭模态。
我们来看一个静态背景的例子：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Modal</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="text-align: center;">
<div class="container mt-3" style="width: 700px;">
<h4>Modal with static backdrop</h4>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-warning-subtle">
<h3 class="modal-title" fs-5" id="exampleModalLabel">Modal title</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body bg-success-subtle border border-dark"><strong><h4>This is a modal with static backdrop. Try clicking outside to close me!!! Sorry you can't, as this has a static backdrop.</h4></strong></div>
<div class="modal-footer bg-warning-subtle">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Save</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Scrollable modal
当模态对视窗或设备来说太长时，Bootstrap 提供了使模态可滚动的功能，独立于页面本身。
我们来看一个可滚动模态的例子：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Modal</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="text-align: center;">
<div class="container mt-3" style="width: 700px;">
<h4>Modal with scrolling long content</h4>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal">
<div class="modal-dialog modal-lg modal-dialog-scrollable" style="height: 300px">
<div class="modal-content">
<div class="modal-header bg-warning-subtle">
<h3 class="modal-title" fs-5" id="exampleModalLabel">Modal title</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body bg-success-subtle border border-dark"><h4>This is an example for a scrollable modal. A scroll bar is seen as the content is too long to be viewed in the modal. Hence the class ".modal-dialog-scrollable" is provided by Bootstrap. Let us use this class and see the change in the appearance of the modal. Still scroll bar doesn't appear. make the content long enough for the scroll to appear.....................................................................................</h4></div>
<div class="modal-footer bg-warning-subtle">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Save</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Vertically centered
为了垂直居中模态，将类 .modal-dialog-centered 用作 .modal-dialog 。
我们来看一个垂直居中模态的例子：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Modal</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="text-align: center;">
<div class="container mt-3" style="width: 700px;">
<h4>Vertically centered modal</h4>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch vertically centered modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal">
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable" style="width: 450px" style="height: 150px">
<div class="modal-content">
<div class="modal-header bg-warning-subtle">
<h3 class="modal-title" fs-5" id="exampleModalLabel">Vertically centered modal</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body bg-success-subtle border border-dark"><h4>This is an example for a vertically centered scrollable modal. A scroll bar is seen as the content is too long to be viewed in the modal. Hence the class ".modal-dialog-centered" with ".modal-dialog-scrollable" is provided by Bootstrap. Let us use this class and see the change in the appearance of the modal. Still scroll bar doesn't appear. make the content long enough for the scroll to appear....scrolllllllllllllllllaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaableeeeeeeeeeeeeee...................................</h4></div>
<div class="modal-footer bg-warning-subtle">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Save</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Tooltips and popovers
我们来看一个带有工具提示的模态的例子：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Modal</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="mt-5">
<h4 class="text-success">Tooltips in modal</h4>
</div>
<div class="modal fade" id="gfg" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal With Tooltip</h4>
</div>
<div class="modal-body">
This is a modal containing a tooltip. To see the tooltip hover over the button shown below.
<button
type="button" id="tooltip1" class="btn btn-secondary mt-4" data-bs-toggle="tooltip" title="I am a tooltip shown on hovering">
Hover over me
</button>
</div>
</div>
</div>
</div>
<button class="btn btn-success mt-4" onclick="showModal()">Show Modal</button>
</div>
<script>
//Enabling the tooltip
bootstrap.Tooltip.getOrCreateInstance("#tooltip1")
// Function to Show Modal
function showModal() {
bootstrap.Modal.getOrCreateInstance('#gfg').show();
}
</script>
</body>
</html>让我们看一个模态窗口和弹出框的示例：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Modal</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="mt-5">
<h4 class="text-success">Popover in modal</h4>
</div>
<div class="modal fade" id="gfg" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal With Popover</h4>
</div>
<div class="modal-body">
This is a modal containing a popover. To see the popover click the button shown below.
<button
type="button" id="popover1" class="btn btn-secondary mt-4" data-bs-toggle="popover" title="I am a popover shown on clicking">
Click me!!!
</button>
</div>
</div>
</div>
</div>
<button class="btn btn-success mt-4" onclick="showModal()">Show Modal</button>
</div>
<script>
//Enabling the popover
bootstrap.Popover.getOrCreateInstance("#popover1")
// Function to Show Modal
function showModal() {
bootstrap.Modal.getOrCreateInstance('#gfg').show();
}
</script>
</body>
</html>Using the grid
Bootstrap 网格系统可以在 .modal-body 内使用，方法是嵌套 .container-fluid ，然后根据需要使用网格系统类。
我们看一个示例：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Modal</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="mt-5">
<h4 class="text-center text-success">Grid in modal</h4>
</div>
<div class="modal fade" id="gfg" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-secondary-subtle">
<h4 class="modal-title">Modal With Grid</h4>
</div>
<div class="modal-body">
<div class="modal-body bg-primary-subtle">
<div class="container-fluid">
<div class="row border border-dark">
<div class="col-md-4 border border-dark">col 1</div>
<div class="col-md-4 ms-auto border border-dark">col 2</div>
</div>
<div class="row border border-dark">
<div class="col-md-3 ms-auto border border-dark">col 3</div>
<div class="col-md-2 ms-auto border border-dark">col 4</div>
</div>
<div class="row border border-dark">
<div class="col-md-6 ms-auto border border-dark">col 5</div>
</div>
<div class="row border border-dark">
<div class="col-sm-9 border border-dark">
Level 1: data
<div class="row border border-dark">
<div class="col-8 col-sm-6 border border-dark">
Level 2: data
</div>
<div class="col-4 col-sm-6 border border-dark">
Level 2: data
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<center>
<button class="btn btn-success mt-4" onclick="showModal()">Show Modal</button>
</center>
</div>
<script>
// Function to Show Modal
function showModal() {
bootstrap.Modal.getOrCreateInstance('#gfg').show();
}
</script>
</body>
</html>Varying modal content
如果您有一组按钮可以激活具有略微不同内容的相同模态窗口，您可以利用 event.relatedTarget 和 HTML data-bs- ** 属性根据点击的特定按钮修改模态窗口的内容。
我们看一个示例：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Modal</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<div class="my-4">
<h4 class="text-success">Varying modal content</h4>
</div>
<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#mymodal" data-bs-heading="About modal">
Open Modal
</button>
<a class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#mymodal" data-bs-heading="Title changed">
Open Modal Changed Title
</a>
<div class="modal fade" id="mymodal" data-bs-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary-subtle">Title 1</div>
<div class="modal-body text-bg-warning">
<p>
Modal is a feature provided by Bootstrap that can include tooltips, popovers, grid and much more.
</p>
</div>
<div class="modal-footer bg-primary-subtle">
<button type="button" class="btn btn-success" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script>
const myModal = document.querySelector('#mymodal');
myModal.addEventListener('show.bs.modal', function (event) {
// Get the reference of the triggering button
// and retrieve the value from the attribute
const button = event.relatedTarget;
const heading = button.getAttribute('data-bs-heading');
// Set the value for the heading
const title = myModal.querySelector('.modal-header').textContent = heading;
});
</script>
</body>
</html>Toggle between modals
借助 data-bs-target 和 data-bs-toggle 属性的放置，你可以轻松在多个模态框之间切换。
不能同时打开多个模态框，你可以简单地在两个不同的模态框之间切换。
让我们看一个模态框切换的示例：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Modal</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<body class="m-4">
<h4>Toggle between modals</h4>
<div class="modal fade" id="modal1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">Modal 1</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>This is a simple modal. Clicking on the "Go to modal 2" button, you can toggle to the second modal.</p>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-bs-dismiss="modal">Close</button>
<button class="btn btn-success" data-bs-target="#modal2" data-bs-toggle="modal" data-bs-dismiss="modal">
Go to modal 2
</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal2">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal2">Modal 2</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>This is the second modal appeared after the 'Go to modal 2' button was clicked from first modal. Click on 'Back' button to go back to modal 1.</p>
</div>
<div class="modal-footer">
<button class="btn btn-success" data-bs-target="#modal1" data-bs-toggle="modal" data-bs-dismiss="modal">Back</button>
</div>
</div>
</div>
</div>
<a class="btn btn-success m-4" data-bs-toggle="modal" href="#modal1" role="button">Launch modal 1</a>
</body>
</html>Change animation
要给模态框添加动画，将类 .fade 用于 .modal ，这会在打开和关闭模态框时添加一个渐隐效果。
如果你想移除动画，只需从 .fade 类中移除 .modal 类即可。
让我们看一个带动画的模态框的示例：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Modal</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="text-align: center;">
<div class="container mt-3" style="width: 700px;">
<h4>Modal with animation</h4>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary"
data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch animated modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-danger-subtle border border-danger">
<h3 class="modal-title">Animated Modal</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Modal with animation</h4></strong></div>
<div class="modal-footer bg-danger-subtle">
<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Save</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>让我们看一个不带动画的模态框的示例：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Modal</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="text-align: center;">
<div class="container mt-3" style="width: 700px;">
<h4>Modal with no animation</h4>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary"
data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch non-animated modal
</button>
<!-- Modal -->
<div class="modal" id="exampleModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-danger-subtle border border-danger">
<h3 class="modal-title">Non-animated Modal</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Modal with no animation</h4></strong></div>
<div class="modal-footer bg-danger-subtle">
<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Save</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Accessibility
确保对于 .modal ，包含属于模态框标题的 aria-labelledby="…" 。此外，为了描述模态框对话框，你可以对 .modal 使用 aria-describedby 。不必添加 role="dialog" ，因为它已通过 JavaScript 实现。
Optional sizes
通过添加修饰类到 .modal-dialog ，一个人可以访问模态框的三种可选尺寸。这些尺寸在特定断点处触发，以防止在较小的视口中出现水平滚动条。
Size |
Class |
Max-width |
Small |
.modal-sm |
300px |
Default |
None |
500px |
Large |
.modal-lg |
800px |
Extra large |
.modal-xl |
1140px |
无修饰类的默认模态框表示 medium 尺寸模态框。
Note: 为了看到不同模态框尺寸的改变效果，请好好改变你的浏览器大小。
让我们看一下不同大小模态框的示例，例如 XL、LG 和 SM：
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Modal</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<center>
<h3><u>Modals of varying sizes</u></h3>
</center>
<!--Extra large Modal-->
<div class="container text-center pb-2">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary"
data-bs-toggle="modal" data-bs-target="#exampleModalXl">
Launch xl modal
</button>
<!-- Modal -->
<div class="modal" id="exampleModalXl">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header bg-danger-subtle border border-danger">
<h3 class="modal-title">Extra Large Modal</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Modal of extra large size</h4></strong></div>
<div class="modal-footer bg-danger-subtle">
<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Save</button>
</div>
</div>
</div>
</div>
</div>
<!--Large Modal-->
<div class="container text-center pb-2">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary"
data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch lg modal
</button>
<!-- Modal -->
<div class="modal" id="exampleModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header bg-danger-subtle border border-danger">
<h3 class="modal-title">Large Modal</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Modal of Large size</h4></strong></div>
<div class="modal-footer bg-danger-subtle">
<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Save</button>
</div>
</div>
</div>
</div>
</div>
<!--Small Modal-->
<div class="container text-center">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary"
data-bs-toggle="modal" data-bs-target="#exampleModalSm">
Launch sm modal
</button>
<!-- Modal -->
<div class="modal" id="exampleModalSm">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header bg-danger-subtle border border-danger">
<h3 class="modal-title">Small Modal</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Modal of small size</h4></strong></div>
<div class="modal-footer bg-danger-subtle">
<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Fullscreen modal
可以通过对 .modal-dialog 应用修饰类来制作一个可以覆盖用户视口的模态框，提供了另一个替代选项。
Class |
Availability |
.modal-fullscreen |
Always |
.modal-fullscreen-sm-down |
576px |
.modal-fullscreen-md-down |
768px |
.modal-fullscreen-lg-down |
992px |
.modal-fullscreen-xl-down |
1200px |
.modal-fullscreen-xxl-down |
1400px |
让我们看一个显示所有覆盖全屏的模态框大小的示例。
Note: 为了看到每种模态框的改变效果，请好好调整浏览器大小。
Example
你可以编辑并尝试运行此代码，使用 编辑和运行 选项。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Modal</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="text-align: center;">
<h3><u>Modals as per the viewport size</u></h3>
<div class="d-flex flex-row mt-auto">
<div class="container mt-5">
<h5>Fullscreen Modal</h5>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary"
data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch fullscreen modal
</button>
<!-- Modal -->
<div class="modal" id="exampleModal">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header bg-danger-subtle border border-danger">
<h3 class="modal-title">Fullscreen Modal</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Fullscreen modal capturing the whole screen</h4></strong></div>
<div class="modal-footer bg-danger-subtle">
<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Save</button>
</div>
</div>
</div>
</div>
</div>
<!--xxl modal-->
<div class="container mt-3">
<h5>Fullscreen xxl Modal</h5>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary"
data-bs-toggle="modal" data-bs-target="#exampleModalXxl">
Launch fullscreen xxl modal
</button>
<!-- Modal -->
<div class="modal" id="exampleModalXxl">
<div class="modal-dialog modal-fullscreen-xxl-down">
<div class="modal-content">
<div class="modal-header bg-danger-subtle border border-danger">
<h3 class="modal-title">Fullscreen xxl Modal</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Fullscreen xxl modal</h4></strong></div>
<div class="modal-footer bg-danger-subtle">
<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Save</button>
</div>
</div>
</div>
</div>
</div>
<!--xl modal-->
<div class="container mt-3">
<h5>Fullscreen xl Modal</h5>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary"
data-bs-toggle="modal" data-bs-target="#exampleModalXl">
Launch fullscreen xl modal
</button>
<!-- Modal -->
<div class="modal" id="exampleModalXl">
<div class="modal-dialog modal-fullscreen-xl-down">
<div class="modal-content">
<div class="modal-header bg-danger-subtle border border-danger">
<h3 class="modal-title">Fullscreen xl Modal</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Fullscreen xl modal</h4></strong></div>
<div class="modal-footer bg-danger-subtle">
<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Save</button>
</div>
</div>
</div>
</div>
</div>
<!--lg modal-->
<div class="container mt-3">
<h5>Fullscreen lg Modal</h5>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary"
data-bs-toggle="modal" data-bs-target="#exampleModalLg">
Launch fullscreen lg modal
</button>
<!-- Modal -->
<div class="modal" id="exampleModalLg">
<div class="modal-dialog modal-fullscreen-lg-down">
<div class="modal-content">
<div class="modal-header bg-danger-subtle border border-danger">
<h3 class="modal-title">Fullscreen lg Modal</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Fullscreen large modal</h4></strong></div>
<div class="modal-footer bg-danger-subtle">
<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Save</button>
</div>
</div>
</div>
</div>
</div>
<!--md modal-->
<div class="container mt-3">
<h5>Fullscreen md Modal</h5>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary"
data-bs-toggle="modal" data-bs-target="#exampleModalMd">
Launch fullscreen md modal
</button>
<!-- Modal -->
<div class="modal" id="exampleModalMd">
<div class="modal-dialog modal-fullscreen-md-down">
<div class="modal-content">
<div class="modal-header bg-danger-subtle border border-danger">
<h3 class="modal-title">Fullscreen Medium Modal</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Fullscreen medium modal</h4></strong></div>
<div class="modal-footer bg-danger-subtle">
<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Save</button>
</div>
</div>
</div>
</div>
</div>
<!--sm modal-->
<div class="container mt-3">
<h5>Fullscreen sm Modal</h5>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary"
data-bs-toggle="modal" data-bs-target="#exampleModalSm">
Launch fullscreen sm modal
</button>
<!-- Modal -->
<div class="modal" id="exampleModalSm">
<div class="modal-dialog modal-fullscreen-sm-down">
<div class="modal-content">
<div class="modal-header bg-danger-subtle border border-danger">
<h3 class="modal-title">Fullscreen Small Modal</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Fullscreen small modal</h4></strong></div>
<div class="modal-footer bg-danger-subtle">
<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>