آموزش جامع مودال در بوت استرپ

0 دیدگاه

این بخش به بررسی کامپوننت مودال در بوت استرپ (Modal) می پردازد. توسعه دهندگان از مودال ها برای نمایش محتوا یا پیام ها در یک پنجره محاوره ای (Dialog Box) استفاده می کنند که به صورت یک لایه روی صفحه فعلی ظاهر می شود.

شما می توانید از مودال ها برای نمایش انواع محتوا مانند تصاویر، ویدیوها، فرم ها و اعلان ها بهره ببرید.

مودال ها به شما کمک می کنند رابط کاربری تعاملی و کاربرپسند طراحی کنید، زیرا کاربران می توانند بدون ترک صفحه فعلی با محتوای مودال تعامل داشته باشند. در آموزش طراحی سایت با بوت استرپ، از مودال ها به عنوان یکی از ابزارهای موثر برای بهبود تجربه کاربری استفاده می شود.

برای سفارشی سازی مودال ها، کافی است از کلاس های داخلی بوت استرپ و افزونه های جاوا اسکریپت (JavaScript plugins) استفاده کنید.

وقتی کاربر روی پس زمینه مودال (Modal backdrop) کلیک می کند، مرورگر به طور خودکار مودال را می بندد.

بوت استرپ همزمان فقط از یک پنجره مودال پشتیبانی می کند.

برای جلوگیری از بروز مشکل، مودال را به جای قرار دادن درون عناصر دیگر، در بالاترین سطح ساختار صفحه (top-level) جای دهید.

استفاده از مودال ها روی دستگاه های موبایل با محدودیت هایی همراه است، زیرا موقعیت آن ها به صورت position: fixed تعریف می شود.

مدیا کوئری prefers-reduced-motion تعیین می کند که افکت های انیمیشنی مودال چگونه نمایش داده شوند.

ویژگی autofocus در تگ HTML داخل مودال های بوت استرپ به صورت پیش فرض عمل نمی کند، زیرا استاندارد HTML5 این رفتار را محدود کرده است. اگر می خواهید به نتیجه مشابه برسید، می توانید از کد جاوا اسکریپت استفاده کنید:

const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

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

const myModal = document.getElementById('myModal')

const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {

myInput.focus()

})

اجزای کامپوننت مودال در بوت استرپ

اجزای اصلی یک مودال در بوت استرپ شامل موارد زیر هستند:

Modal header: این بخش عنوان (title) و دکمه بستن (close button) را نمایش می دهد.
Modal body: این بخش محتوای اصلی مودال را ارائه می دهد.
Modal footer: این بخش دکمه ها یا سایر اقدامات (actions) قابل استفاده برای کاربر را در بر می گیرد.
Modal backdrop: این لایه نیمه شفاف پس زمینه صفحه را در زمان فعال بودن مودال می پوشاند.
Modal content: این بخش تمام اجزای header، body و footer را درون خود نگه می دارد.
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>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>

</head>

<h4>Static Modal</h4>

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch modal</button>

<h3 class="modal-title">Modal title</h3>

</div>

<div class="modal-body"><strong><h4>Example of a Static Modal</h4></strong></div>

<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

پس زمینه ایستا (Static backdrop)

زمانی که پس زمینه مودال (backdrop) به صورت ایستا (static) تنظیم می شود، با کلیک بر روی آن، مودال بسته نخواهد شد.

اکنون یک مثال از استفاده از پس زمینه ایستا را بررسی می کنیم:

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

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Modal</title>

</head>

<h4>Modal with static backdrop</h4>

Launch modal

</button>

<h3 class="modal-title" fs-5" id="exampleModalLabel">Modal title</h3>

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

<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

مودال اسکرول شونده (Scrollable modal)

بوت استرپ این امکان را فراهم می کند که مودال را به صورت مستقل از صفحه، اسکرول پذیر طراحی کنید. این ویژگی زمانی کاربرد دارد که ارتفاع مودال از فضای قابل نمایش (viewport) یا اندازه صفحه دستگاه بیشتر می شود.

در ادامه یک مثال از مودال اسکرول شونده را مشاهده می کنیم:

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

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Modal</title>

</head>

<h4>Modal with scrolling long content</h4>

Launch modal

</button>

<h3 class="modal-title" fs-5" id="exampleModalLabel">Modal title</h3>

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

<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>

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

</head>

<h4>Vertically centered modal</h4>

Launch vertically centered modal

</button>

<h3 class="modal-title" fs-5" id="exampleModalLabel">Vertically centered modal</h3>

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

<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

تولتیپ (Tooltip) و پاپ اور (Popover)

شما می توانید درون مودال ها از تولتیپ و پاپ آور استفاده کنید. زمانی که مودال بسته می شود، بوت استرپ به طور خودکار تولتیپ ها و پاپ آور های داخل آن را نیز حذف می کند.

اکنون یک مثال از مودال همراه با تولتیپ را مشاهده می کنیم:

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

</head>

<body>

<h4 class="text-success">Tooltips in modal</h4>

</div>

<h4 class="modal-title">Modal With Tooltip</h4>

</div>

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>

<button class="btn btn-success mt-4" onclick="showModal()">Show Modal</button>

</div>

//Enabling the tooltip

bootstrap.Tooltip.getOrCreateInstance("#tooltip1")

// Function to Show Modal

function showModal() {

bootstrap.Modal.getOrCreateInstance('#gfg').show();

}

</script>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

اکنون یک مثال از مودال همراه با پاپ آور (Popover) را بررسی می کنیم:

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

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Modal</title>

</head>

<body>

<h4 class="text-success">Popover in modal</h4>

</div>

<h4 class="modal-title">Modal With Popover</h4>

</div>

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>

<button class="btn btn-success mt-4" onclick="showModal()">Show Modal</button>

</div>

//Enabling the popover

bootstrap.Popover.getOrCreateInstance("#popover1")

// Function to Show Modal

function showModal() {

bootstrap.Modal.getOrCreateInstance('#gfg').show();

}

</script>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

استفاده از گرید در مودال بوت استرپ

شما می توانید از سیستم گرید بوت استرپ درون بخش .modal-body استفاده کنید. برای این کار، ابتدا یک .container-fluid درون .modal-body قرار می دهید و سپس بر اساس نیاز، کلاس های سیستم گرید را به کار می برید.

در ادامه یک مثال از این روش را مشاهده می کنیم:

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

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Modal</title>

</head>

<body>

<h4 class="text-center text-success">Grid in modal</h4>

</div>

<h4 class="modal-title">Modal With Grid</h4>

</div>

</div>

</div>

</div>

Level 1: data

Level 2: data

</div>

Level 2: data

</div>

<button class="btn btn-success mt-4" onclick="showModal()">Show Modal</button>

</center>

</div>

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

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Modal</title>

</head>

<body>

<h4 class="text-success">Varying modal content</h4>

</div>

Open Modal

</button>

Open Modal Changed Title

</a>

<div class="modal-header bg-primary-subtle">Title 1</div>

<p>

Modal is a feature provided by Bootstrap that can include tooltips, popovers, grid and much more.

</p>

</div>

<button type="button" class="btn btn-success" data-bs-dismiss="modal">Close</button>

</div>

const myModal = document.querySelector('#mymodal');

myModal.addEventListener('show.bs.modal', function (event) {

// Get the reference of the triggering button

// and retrieve the value from the attribute

const button = event.relatedTarget;

const heading = button.getAttribute('data-bs-heading');

// Set the value for the heading

const title = myModal.querySelector('.modal-header').textContent = heading;

});

</script>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

جابجایی بین مودال ها در بوت استرپ (Toggle between modals)

با استفاده از ویژگی های data-bs-target و data-bs-toggle می توانید به راحتی بین چند مودال جابجا شوید.

در بوت استرپ، امکان باز کردن چند مودال به صورت همزمان وجود ندارد. اما می توانید به سادگی بین دو مودال مختلف جابجا کنید.

اکنون یک مثال از جابجایی بین مودال ها را مشاهده می کنیم:

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

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Modal</title>

</head>

<body>

<h4>Toggle between modals</h4>

<h5 class="modal-title" id="modalLabel">Modal 1</h5>

</div>

<p>This is a simple modal. Clicking on the "Go to modal 2" button, you can toggle to the second modal.</p>

</div>

<button class="btn btn-danger" data-bs-dismiss="modal">Close</button>

Go to modal 2

</button>

</div>

<h5 class="modal-title" id="modal2">Modal 2</h5>

</div>

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

<a class="btn btn-success m-4" data-bs-toggle="modal" href="#modal1" role="button">Launch modal 1</a>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

تغییر انیمیشن مودال در بوت استرپ

برای اضافه کردن انیمیشن به مودال، کافی است کلاس .fade را به عنصر .modal اضافه کنید. با این کار، هنگام باز و بسته شدن مودال، یک افکت محو شدن (fading effect) نمایش داده می شود.

اگر تمایل دارید انیمیشن را حذف کنید، فقط کافی است کلاس .fade را از روی .modal بردارید.

اکنون یک مثال از مودال همراه با انیمیشن را بررسی می کنیم:

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

</head>

<h4>Modal with animation</h4>

<button type="button" class="btn btn-primary"

data-bs-toggle="modal" data-bs-target="#exampleModal">

Launch animated modal

</button>

<h3 class="modal-title">Animated Modal</h3>

</div>

<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Modal with animation</h4></strong></div>

<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

ارتفاع های پویا

اگر ارتفاع مودال به صورت پویا تغییر کند، باید با فراخوانی تابع myModal.handleUpdate() موقعیت مودال را به روز رسانی کنید تا به درستی در صفحه نمایش داده شود.

دسترسی پذیری مودال در بوت استرپ

برای رعایت اصول دسترسی پذیری، حتماً ویژگی aria-labelledby="..." را به مودال اضافه کنید تا به عنوان مودال اشاره کند. همچنین می توانید با استفاده از ویژگی aria-describedby توضیحاتی درباره محتوای مودال ارائه دهید. نیازی به افزودن role="dialog" وجود ندارد، زیرا این نقش به طور پیش فرض از طریق جاوا اسکریپت اعمال شده است.

اندازه های اختیاری

با افزودن کلاس های تغییر دهنده (modifier classes) به عنصر .modal-dialog می توانید از سه اندازه اختیاری برای مودال ها استفاده کنید. این اندازه ها در نقاط شکست (breakpoints) مشخص فعال می شوند تا از ایجاد نوار اسکرول افقی در صفحه های کوچک جلوگیری شود.

اندازه	کلاس	حداکثر عرض (Max-width)
کوچک (Small)	`.modal-sm`	300px
پیش فرض (Default)	(بدون کلاس)	500px
بزرگ (Large)	`.modal-lg`	800px
فوق بزرگ (Extra large)	`.modal-xl`	1140px

زمانی که از مودال پیش فرض استفاده می کنید و هیچ کلاس تغییر دهنده ای اضافه نمی کنید، در واقع مودال با اندازه متوسط (medium) نمایش داده می شود.

نکته: برای مشاهده تفاوت در اندازه های مختلف مودال، لطفاً اندازه مرورگر خود را تغییر دهید.

اکنون یک مثال از مودال های با اندازه های مختلف مانند 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>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Modal</title>

</head>

<body>

<h3><u>Modals of varying sizes</u></h3>

</center>

<button type="button" class="btn btn-primary"

data-bs-toggle="modal" data-bs-target="#exampleModalXl">

Launch xl modal

</button>

<h3 class="modal-title">Extra Large Modal</h3>

</div>

<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Modal of extra large size</h4></strong></div>

<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>

</div>

<button type="button" class="btn btn-primary"

data-bs-toggle="modal" data-bs-target="#exampleModal">

Launch lg modal

</button>

<h3 class="modal-title">Large Modal</h3>

</div>

<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Modal of Large size</h4></strong></div>

<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>

</div>

<button type="button" class="btn btn-primary"

data-bs-toggle="modal" data-bs-target="#exampleModalSm">

Launch sm modal

</button>

<h3 class="modal-title">Small Modal</h3>

</div>

<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Modal of small size</h4></strong></div>

<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

مودال تمام صفحه در بوت استرپ

با استفاده از کلاس های تغییر دهنده (modifier classes) که به عنصر .modal-dialog اضافه می شوند، می توانید مودالی ایجاد کنید که کل نمای صفحه کاربر (viewport) را بپوشاند. این روش یک گزینه دیگر برای سفارشی سازی نمایش مودال به شمار می رود.

کلاس	محدوده در دسترس
`.modal-fullscreen`	همیشه (Always)
`.modal-fullscreen-sm-down`	576px و کمتر
`.modal-fullscreen-md-down`	768px و کمتر
`.modal-fullscreen-lg-down`	992px و کمتر
`.modal-fullscreen-xl-down`	1200px و کمتر
`.modal-fullscreen-xxl-down`	1400px و کمتر

اکنون یک مثال از مودال هایی در اندازه های مختلف که تمام صفحه را می پوشانند مشاهده می کنیم:

نکته: برای مشاهده تاثیر تغییر اندازه در انواع مختلف مودال ها، لطفاً اندازه مرورگر خود را تغییر دهید.

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Modal</title>

</head>

<h3><u>Modals as per the viewport size</u></h3>

<h5>Fullscreen Modal</h5>

<button type="button" class="btn btn-primary"

data-bs-toggle="modal" data-bs-target="#exampleModal">

Launch fullscreen modal

</button>

<h3 class="modal-title">Fullscreen Modal</h3>

</div>

<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Fullscreen modal capturing the whole screen</h4></strong></div>

<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>

</div>

<h5>Fullscreen xxl Modal</h5>

<button type="button" class="btn btn-primary"

data-bs-toggle="modal" data-bs-target="#exampleModalXxl">

Launch fullscreen xxl modal

</button>

<h3 class="modal-title">Fullscreen xxl Modal</h3>

</div>

<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Fullscreen xxl modal</h4></strong></div>

<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>

</div>

<h5>Fullscreen xl Modal</h5>

<button type="button" class="btn btn-primary"

data-bs-toggle="modal" data-bs-target="#exampleModalXl">

Launch fullscreen xl modal

</button>

<h3 class="modal-title">Fullscreen xl Modal</h3>

</div>

<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Fullscreen xl modal</h4></strong></div>

<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>

</div>

<h5>Fullscreen lg Modal</h5>

<button type="button" class="btn btn-primary"

data-bs-toggle="modal" data-bs-target="#exampleModalLg">

Launch fullscreen lg modal

</button>

<h3 class="modal-title">Fullscreen lg Modal</h3>

</div>

<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Fullscreen large modal</h4></strong></div>

<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>

</div>

<h5>Fullscreen md Modal</h5>

<button type="button" class="btn btn-primary"

data-bs-toggle="modal" data-bs-target="#exampleModalMd">

Launch fullscreen md modal

</button>

<h3 class="modal-title">Fullscreen Medium Modal</h3>

</div>

<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Fullscreen medium modal</h4></strong></div>

<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>

</div>

<h5>Fullscreen sm Modal</h5>

<button type="button" class="btn btn-primary"

data-bs-toggle="modal" data-bs-target="#exampleModalSm">

Launch fullscreen sm modal

</button>

<h3 class="modal-title">Fullscreen Small Modal</h3>

</div>

<div class="modal-body bg-warning-subtle border border-danger"><strong><h4>Fullscreen small modal</h4></strong></div>

<button type="button" class="btn btn-danger border border-danger" data-bs-dismiss="modal">Close</button>

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

پکیج صفر تا صد آموزش سئو و بهینه سازی بصورت عملی

انتشار: ۱۲ خرداد ۱۴۰۴

آموزش جامع مودال در بوت استرپ

اجزای کامپوننت مودال در بوت استرپ

پس زمینه ایستا (Static backdrop)

مودال اسکرول شونده (Scrollable modal)

مودال با چینش عمودی در مرکز

تولتیپ (Tooltip) و پاپ اور (Popover)

استفاده از گرید در مودال بوت استرپ

تغییر محتوای مودال در بوت استرپ

جابجایی بین مودال ها در بوت استرپ (Toggle between modals)

تغییر انیمیشن مودال در بوت استرپ

ارتفاع های پویا

دسترسی پذیری مودال در بوت استرپ

اندازه های اختیاری

مودال تمام صفحه در بوت استرپ

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط