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/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.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/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() 以調整模態框的位置。

可訪問性

確保您包含與模態框標題相關的 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/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-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/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>
列印頁面
上一頁
下一頁
廣告