Bootstrap - 模态框

本章讨论 Bootstrap 的组件模式。模态框是一种组件，用于在覆盖当前页面的可自定义对话框中显示内容或消息。

模态框可用于多种目的，例如显示图像、视频、表单和通知。
模态对于创建用户友好的交互式界面非常有用，因为它们允许用户在不离开当前页面的情况下与内容交互。
它们还可以使用 Bootstrap 的内置类和 JavaScript 插件轻松自定义。
单击模态背景时，模态将自动关闭。
Bootstrap 一次仅支持一个模式窗口。
建议避免将.modal嵌套在另一个元素中。而是将模态放在顶层位置以避免其他元素的干扰。
由于position:fixed，在移动设备上使用模态框会带来一定的限制。
模态组件的动画效果取决于首选减少运动媒体查询。
由于 HTML5 定义其语义的方式，autofocus HTML 属性在 Bootstrap 模式中无效。通过使用特制的 JavaScript 代码可以获得类似的结果。

    const myModal = document.getElementById('myModal')
    const myInput = document.getElementById('myInput')
       
    myModal.addEventListener('shown.bs.modal', () => {
    myInput.focus()
    })

模态组件

Bootstrap 中模态框的组成部分如下：

模态标题- 包含标题和关闭按钮。
模态体- 包含模态的内容。
模态页脚- 包含用户可以使用的按钮或其他操作。
模态背景- 当模态处于活动状态时覆盖背景的半透明覆盖层。
模态内容- 容纳页眉、正文和页脚组件的容器。
模态对话框- 最外层的容器，定义模态的大小以及其中内容的位置。

让我们看一个基本模态的示例：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!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>

静态背景

当背景是静态时，模态框在单击时不会关闭。

让我们看一个静态背景的例子：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!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>

可滚动模态

当模态对于视口或设备来说太长时，Bootstrap 提供了使模态可滚动的功能，独立于页面本身。

让我们看一个可滚动模态的示例：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!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>

垂直居中

为了使模式垂直居中，请使用.modal-dialog-centered类到.modal-dialog。

让我们看一个垂直居中模态的示例：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!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>

工具提示和弹出窗口

模态框可以包括工具提示和弹出框。当容器模式关闭时，模式中的工具提示和弹出窗口会自动消失。

让我们看一个带有工具提示的模态示例：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!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>

让我们看一个带有弹出框的模态示例：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!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>

使用网格

通过嵌套.container-fluid，可以在.modal-body中使用 Bootstrap 网格系统，然后根据需要使用网格系统类。

让我们看一个例子：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!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>

不同的模态内容

如果您有一组按钮，这些按钮激活内容略有不同的相同模态，则可以利用event.latedTarget和 HTML data-bs-*属性根据单击的特定按钮修改模态的内容。

让我们看一个例子：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!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>

在模态之间切换

借助data-bs-target和data-bs-toggle属性的放置，您可以轻松在多个模式之间切换。

多个模态不能同时打开，您可以简单地在两个不同模态之间切换。

让我们看一个在模态之间切换的示例：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!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>

改变动画

为了向模态添加动画，请使用.fade类到.modal，这将在打开和关闭模态时添加淡入淡出效果。

如果您想删除动画，只需从.modal类中删除.fade类即可。

让我们看一个带有动画的模态示例：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!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>

让我们看一个没有动画的模态示例：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!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>

动态高度

如果模态框的高度动态变化，您应该调用函数myModal.handleUpdate()来调整模态框的位置。

无障碍

确保包含与.modal的模态标题相关的aria-labelledby="..."。另外，为了描述您的模式对话框，您可以在.modal上使用aria-descriptedby。不需要添加role="dialog"，因为它已经通过 JavaScript 实现了。

可选尺寸

通过向.modal-dialog添加修饰符类，可以访问三种可选大小的模态框。这些尺寸在特定断点处触发，以防止在较小的视口上出现水平滚动条。

尺寸	班级	最大宽度
小的	.modal-sm	300像素
默认	没有任何	500像素
大的	.modal-lg	800像素
特大号	.modal-xl	1140像素

没有修饰符类的默认模态，表示中等尺寸的模态。

注意：为了看到不同模态尺寸的变化效果，请更改浏览器的尺寸。

让我们看一下不同大小的模态框的示例，例如 xl、lg 和 sm：

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!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>

全屏模式

通过应用于.modal-dialog 的修饰符类可以覆盖用户视口的模式，从而提供另一个覆盖选项。

班级	可用性
.modal-全屏	总是
.modal-全屏-sm-down	576像素
.modal-全屏-md-down	768像素
.modal-全屏-lg-down	992像素
.modal-全屏-xl-down	1200像素
.modal-全屏-xxl-down	1400像素

让我们看一个示例，显示覆盖全屏的模态框的所有尺寸。

注意：为了查看每种模态的更改效果，请调整浏览器的大小。

例子

您可以使用“编辑并运行”选项编辑并尝试运行此代码。

<!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>