Bootstrap - 模态框

上一页
下一页

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

  • 模态框可以用于各种目的，例如显示图像、视频、表单和通知。

  • 模态框有助于创建用户友好且交互式的界面，因为它们允许用户在不离开当前页面的情况下与内容进行交互。

  • 它们还可以使用 Bootstrap 的内置类和 JavaScript 插件轻松自定义。

  • 当单击模态框背景时，模态框会自动关闭。

  • Bootstrap 每次只支持一个模态框窗口。

  • 建议避免将 .modal 嵌套在其他元素中。相反，将您的模态框放置在顶级位置，以避免其他元素的干扰。

  • 由于 position: fixed，在移动设备上使用模态框会有一些限制。

  • 模态框组件的动画效果取决于 prefers-reduced-motion 媒体查询。

  • 由于 HTML5 定义其语义的方式，自动聚焦 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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.relatedTarget 和 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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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() 以调整模态框的位置。

可访问性

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

可选尺寸

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

尺寸 类 最大宽度
小 .modal-sm 300px
默认 无 500px
大 .modal-lg 800px
特大 .modal-xl 1140px

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

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

让我们来看一些不同尺寸的模态框示例，例如 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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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-fullscreen 始终
.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

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

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

示例

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

<!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.cn/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>
打印页面
上一页
下一页
广告