معین
از افزونه مودال جاوا اسکریپت Bootstrap برای افزودن دیالوگ هایی به سایت خود برای لایت باکس ها، اعلان های کاربر یا محتوای کاملاً سفارشی استفاده کنید.
چگونه کار می کند
قبل از شروع کار با مؤلفه مدال بوت استرپ، حتماً موارد زیر را بخوانید زیرا گزینه های منو اخیراً تغییر کرده اند.
- مدال ها با HTML، CSS و جاوا اسکریپت ساخته می شوند. آنها بر روی هر چیز دیگری در سند قرار می گیرند و اسکرول را از آن حذف می کنند
<body>
تا محتوای مدال به جای آن اسکرول شود. - با کلیک بر روی "پس زمینه" مدال به طور خودکار مودال بسته می شود.
- بوت استرپ هر بار فقط از یک پنجره مودال پشتیبانی می کند. حالتهای تودرتو پشتیبانی نمیشوند، زیرا ما معتقدیم که آنها تجربه کاربری ضعیفی هستند.
- Modals استفاده میکنند
position: fixed
، که گاهی اوقات میتواند در مورد رندر آن کمی خاص باشد. در صورت امکان، HTML مدال خود را در یک موقعیت سطح بالا قرار دهید تا از تداخل احتمالی عناصر دیگر جلوگیری شود. احتمالاً هنگام قرار دادن یک.modal
عنصر در یک عنصر ثابت دیگر با مشکلاتی مواجه خواهید شد. - بار دیگر، با توجه به
position: fixed
, برخی از هشدارها در مورد استفاده از مدال در دستگاه های تلفن همراه وجود دارد. برای جزئیات به اسناد پشتیبانی مرورگر ما مراجعه کنید . - با توجه به اینکه HTML5 چگونه معنایی خود را تعریف می کند، ویژگی
autofocus
HTML هیچ تاثیری در مدال های Bootstrap ندارد. برای رسیدن به همان اثر، از جاوا اسکریپت سفارشی استفاده کنید:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
prefers-reduced-motion
اثر انیمیشن این مؤلفه به پرسش رسانه
بستگی دارد
. بخش
حرکت کاهش یافته اسناد دسترسی ما را ببینید.
برای دموها و دستورالعمل های استفاده به خواندن ادامه دهید.
مثال ها
اجزای مدال
در زیر یک مثال مودال ایستاposition
(به معنی آن و display
لغو شده است) آمده است. شامل سرصفحه مودال، بدنه مودال (الزامی برای padding
) و پاورقی مودال (اختیاری) است. ما از شما میخواهیم که در صورت امکان، سرصفحههای معین را با کنشهای رد کردن درج کنید، یا اقدام رد صریح دیگری ارائه دهید.
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
نسخه ی نمایشی زنده
با کلیک کردن روی دکمه زیر، یک نسخه آزمایشی مودال کار را تغییر دهید. از بالای صفحه به پایین می لغزد و محو می شود.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
پس زمینه ایستا
وقتی پسزمینه روی استاتیک تنظیم میشود، مودال هنگام کلیک کردن در خارج از آن بسته نمیشود. روی دکمه زیر کلیک کنید تا آن را امتحان کنید.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
پیمایش مطالب طولانی
هنگامی که مدال ها برای نمای کاربر یا دستگاه بسیار طولانی می شوند، مستقل از خود صفحه اسکرول می کنند. دمو زیر را امتحان کنید تا متوجه منظور ما شوید.
.modal-dialog-scrollable
همچنین میتوانید یک مدال قابل پیمایش ایجاد کنید که با افزودن به مودال بدنه را اسکرول کنید .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
عمودی در مرکز
.modal-dialog-centered
به .modal-dialog
وسط عمودی مدال اضافه کنید.
<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
...
</div>
<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
...
</div>
راهنمای ابزار و پاپاور
راهنمای ابزار و پاپاورها را می توان در صورت نیاز در مدال قرار داد. هنگامی که مدال ها بسته می شوند، هر راهنمایی ابزار و پاپاور درون نیز به طور خودکار رد می شود.
<div class="modal-body">
<h5>Popover in a modal</h5>
<p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
<hr>
<h5>Tooltips in a modal</h5>
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>
با استفاده از شبکه
از سیستم شبکه بوت استرپ در یک مودال با تودرتو .container-fluid
در داخل استفاده کنید .modal-body
. سپس، از کلاس های سیستم شبکه معمولی مانند هر جای دیگری استفاده کنید.
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
<div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
</div>
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
</div>
محتوای مودال متفاوت
آیا یک دسته دکمه دارید که همگی یک مدال را با محتویات کمی متفاوت راه اندازی می کنند؟ از ویژگیهای HTMLevent.relatedTarget
و (احتمالاً از طریق jQuery ) برای تغییر محتویات مدال بسته به اینکه روی کدام دکمه کلیک شده است، استفاده کنید.data-*
در زیر یک نسخه آزمایشی زنده و به دنبال آن HTML و جاوا اسکریپت وجود دارد. برای اطلاعات بیشتر، اسناد رویدادهای مودال را برای جزئیات بیشتر بخوانید relatedTarget
.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
انیمیشن را تغییر دهید
$modal-fade-transform
متغیر حالت تبدیل قبل .modal-dialog
از انیمیشن محو شدن مودال را $modal-show-transform
تعیین می کند، متغیر تبدیل .modal-dialog
در انتهای انیمیشن محو شدن مدال را تعیین می کند.
اگر به عنوان مثال یک انیمیشن بزرگنمایی می خواهید، می توانید تنظیم کنید $modal-fade-transform: scale(.8)
.
حذف انیمیشن
برای حالتهایی که بهجای محو شدن برای مشاهده، به سادگی ظاهر میشوند، .fade
کلاس را از نشانهگذاری مدال خود حذف کنید.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
ارتفاعات پویا
اگر ارتفاع مدال در حین باز بودن تغییر کرد، باید $('#myModal').modal('handleUpdate')
برای تنظیم مجدد موقعیت مدال در صورت ظاهر شدن نوار پیمایش، تماس بگیرید.
دسترسی
حتماً با aria-labelledby="..."
ارجاع به عنوان مودال به اضافه کنید .modal
. علاوه بر این، میتوانید شرحی از گفتگوی مودال خود با aria-describedby
در ارائه دهید .modal
. توجه داشته باشید که نیازی به اضافه کردن ندارید role="dialog"
زیرا ما قبلاً آن را از طریق جاوا اسکریپت اضافه کرده ایم.
جاسازی ویدیوهای یوتیوب
جاسازی ویدیوهای YouTube در حالتها به جاوا اسکریپت اضافی نیاز دارد که در بوت استرپ نباشد تا به طور خودکار بازپخش و موارد دیگر متوقف شود. برای اطلاعات بیشتر به این پست مفید Stack Overflow مراجعه کنید .
اندازه های اختیاری
مدالها سه اندازه اختیاری دارند که از طریق کلاسهای اصلاحکننده در دسترس هستند تا روی یک قرار بگیرند .modal-dialog
. این اندازهها در نقاط شکست مشخصی ایجاد میشوند تا از نوارهای اسکرول افقی در نماهای باریکتر جلوگیری کنند.
اندازه | کلاس | حداکثر عرض معین |
---|---|---|
کم اهمیت | .modal-sm |
300px |
پیش فرض | هیچ یک | 500px |
بزرگ | .modal-lg |
800px |
فوق العاده بزرگ | .modal-xl |
1140px |
مدال پیشفرض ما بدون کلاس اصلاحکننده، مدال اندازه «متوسط» را تشکیل میدهد.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
استفاده
افزونه مودال محتوای پنهان شما را در صورت تقاضا، از طریق ویژگی های داده یا جاوا اسکریپت تغییر می دهد. همچنین به نادیده گرفتن رفتار پیمایش پیشفرض اضافه .modal-open
میکند <body>
و یک .modal-backdrop
ناحیه کلیک برای رد کردن مدالهای نشاندادهشده هنگام کلیک کردن در خارج از مدال ایجاد میکند.
از طریق ویژگی های داده
یک مدال را بدون نوشتن جاوا اسکریپت فعال کنید. data-toggle="modal"
روی یک عنصر کنترلر، مانند یک دکمه، به همراه یک data-target="#foo"
یا href="#foo"
برای هدف قرار دادن یک مدال خاص برای جابجایی تنظیم کنید.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
از طریق جاوا اسکریپت
myModal
با یک خط جاوا اسکریپت یک مدال با شناسه فراخوانی کنید :
$('#myModal').modal(options)
گزینه ها
گزینه ها را می توان از طریق ویژگی های داده یا جاوا اسکریپت منتقل کرد. data-
برای ویژگی های داده، نام گزینه را به مانند در ضمیمه کنید data-backdrop=""
.
نام | تایپ کنید | پیش فرض | شرح |
---|---|---|---|
پس زمینه | بولی یا رشته ای'static' |
درست است، واقعی | شامل یک عنصر پس زمینه مدال است. متناوباً، static برای پسزمینهای مشخص کنید که با کلیک، مدال را نمیبندد. |
صفحه کلید | بولی | درست است، واقعی | هنگامی که کلید فرار فشار داده می شود، مدال را می بندد |
تمرکز | بولی | درست است، واقعی | هنگامی که مقداردهی اولیه می شود، تمرکز خود را روی مدال قرار می دهد. |
نشان می دهد | بولی | درست است، واقعی | زمانی که مقدار دهی اولیه می شود، مودال را نشان می دهد. |
مواد و روش ها
روش ها و انتقال های ناهمزمان
همه متدهای API ناهمزمان هستند و یک انتقال را شروع می کنند . آنها به محض شروع انتقال اما قبل از پایان آن به تماس گیرنده باز می گردند . علاوه بر این، فراخوانی متد بر روی یک جزء انتقال نادیده گرفته خواهد شد .
.modal(options)
محتوای شما را به صورت مدال فعال می کند. یک گزینه اختیاری را می پذیرد object
.
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
به صورت دستی یک مودال را تغییر می دهد. قبل از اینکه مدال واقعاً نشان داده یا پنهان شود (یعنی قبل از وقوع رویداد یا رویداد) به تماس گیرنده برمی گردد.shown.bs.modal
hidden.bs.modal
$('#myModal').modal('toggle')
.modal('show')
به صورت دستی یک مودال را باز می کند. قبل از اینکه مدال واقعاً نشان داده شود (یعنی قبل از وقوع رویداد) به تماس گیرنده برمی گردد .shown.bs.modal
$('#myModal').modal('show')
.modal('hide')
به صورت دستی یک مودال را پنهان می کند. قبل از اینکه مدال واقعاً پنهان شود (یعنی قبل از وقوع رویداد) به تماس گیرنده برمی گردد .hidden.bs.modal
$('#myModal').modal('hide')
.modal('handleUpdate')
اگر ارتفاع مودال در حین باز بودن تغییر کرد (یعنی در صورت ظاهر شدن یک نوار پیمایش) به صورت دستی موقعیت مودال را دوباره تنظیم کنید.
$('#myModal').modal('handleUpdate')
.modal('dispose')
مودال یک عنصر را از بین می برد.
مناسبت ها
کلاس مودال بوت استرپ چند رویداد را برای اتصال به عملکرد مودال نشان می دهد. همه رویدادهای مودال به سمت خود مدال شلیک می شوند (یعنی در <div class="modal">
).
نوع رویداد | شرح |
---|---|
نمایش.ب.مدال | این رویداد بلافاصله پس از show فراخوانی متد نمونه فعال می شود. اگر ناشی از کلیک باشد، عنصر کلیک شده به عنوان relatedTarget ویژگی رویداد در دسترس است. |
نشان داده شده.bs.modal | این رویداد زمانی فعال می شود که مدال برای کاربر قابل مشاهده باشد (منتظر تکمیل انتقال CSS می شود). اگر ناشی از کلیک باشد، عنصر کلیک شده به عنوان relatedTarget ویژگی رویداد در دسترس است. |
hide.bs.modal | این رویداد بلافاصله پس از hide فراخوانی متد نمونه فعال می شود. |
hidden.bs.modal | این رویداد زمانی فعال می شود که مودال از کاربر پنهان شود (منتظر تکمیل انتقال CSS می شود). |
hidePrevented.bs.modal | این رویداد زمانی اجرا میشود که مدال نشان داده میشود، پسزمینه آن است static و یک کلیک در خارج از مدال یا فشار دادن کلید فرار با گزینه صفحه کلید انجام میشود یا data-keyboard روی false . |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})