از افزونه مودال جاوا اسکریپت Bootstrap برای افزودن دیالوگ هایی به سایت خود برای لایت باکس ها، اعلان های کاربر یا محتوای کاملاً سفارشی استفاده کنید.
چگونه کار می کند
قبل از شروع کار با مؤلفه مدال بوت استرپ، حتماً موارد زیر را بخوانید زیرا گزینه های منو اخیراً تغییر کرده اند.
مدال ها با HTML، CSS و جاوا اسکریپت ساخته می شوند. آنها بر روی هر چیز دیگری در سند قرار می گیرند و اسکرول را از آن حذف می کنند <body>تا محتوای مدال به جای آن اسکرول شود.
با کلیک بر روی "پس زمینه" مدال به طور خودکار مودال بسته می شود.
بوت استرپ هر بار فقط از یک پنجره مودال پشتیبانی می کند. حالتهای تودرتو پشتیبانی نمیشوند، زیرا ما معتقدیم که آنها تجربه کاربری ضعیفی هستند.
Modals استفاده میکنند position: fixed، که گاهی اوقات میتواند در مورد رندر آن کمی خاص باشد. در صورت امکان، HTML مدال خود را در یک موقعیت سطح بالا قرار دهید تا از تداخل احتمالی عناصر دیگر جلوگیری شود. احتمالاً هنگام قرار دادن یک .modalعنصر در یک عنصر ثابت دیگر با مشکلاتی مواجه خواهید شد.
با توجه به اینکه HTML5 چگونه معنایی خود را تعریف می کند، ویژگی autofocusHTML هیچ تاثیری در مدال های Bootstrap ندارد. برای رسیدن به همان اثر، از جاوا اسکریپت سفارشی استفاده کنید:
برای دموها و دستورالعمل های استفاده به خواندن ادامه دهید.
مثال ها
اجزای مدال
در زیر یک مثال مودال ایستاposition (به معنی آن و displayلغو شده است) آمده است. شامل سرصفحه مودال، بدنه مودال (الزامی برای padding) و پاورقی مودال (اختیاری) است. ما از شما میخواهیم که در صورت امکان، سرصفحههای معین را با کنشهای رد کردن درج کنید، یا اقدام رد صریح دیگری ارائه دهید.
عنوان مدال
متن متن معین به اینجا می رود.
نسخه ی نمایشی زنده
با کلیک کردن روی دکمه زیر، یک نسخه آزمایشی مودال کار را تغییر دهید. از بالای صفحه به پایین می لغزد و محو می شود.
Modal title
Woohoo, you're reading this text in a modal!
پس زمینه ایستا
وقتی پسزمینه روی استاتیک تنظیم میشود، مودال هنگام کلیک کردن در خارج از آن بسته نمیشود. روی دکمه زیر کلیک کنید تا آن را امتحان کنید.
Modal title
I will not close if you click outside me. Don't even try to press escape key.
پیمایش مطالب طولانی
هنگامی که مدال ها برای نمای کاربر یا دستگاه بسیار طولانی می شوند، مستقل از خود صفحه اسکرول می کنند. دمو زیر را امتحان کنید تا متوجه منظور ما شوید.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
.modal-dialog-scrollableهمچنین میتوانید یک مدال قابل پیمایش ایجاد کنید که با افزودن به مودال بدنه را اسکرول کنید .modal-dialog.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Modal title
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
راهنمای ابزار و پاپاور
راهنمای ابزار و پاپاورها را می توان در صورت نیاز در مدال قرار داد. هنگامی که مدال ها بسته می شوند، هر راهنمایی ابزار و پاپاور درون نیز به طور خودکار رد می شود.
از سیستم شبکه بوت استرپ در یک مودال با تودرتو .container-fluidدر داخل استفاده کنید .modal-body. سپس، از کلاس های سیستم شبکه معمولی مانند هر جای دیگری استفاده کنید.
Grids in modals
.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-auto
.col-md-2 .ml-auto
.col-md-6 .ml-auto
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
محتوای مودال متفاوت
آیا یک دسته دکمه دارید که همگی یک مودال را با محتویات کمی متفاوت راه اندازی می کنند؟ از ویژگیهای HTMLevent.relatedTarget و (احتمالاً از طریق jQuery ) برای تغییر محتویات مدال بسته به اینکه روی دکمه کلیک شده است، استفاده کنید.data-*
در زیر یک نسخه آزمایشی زنده و به دنبال آن HTML و جاوا اسکریپت وجود دارد. برای اطلاعات بیشتر، اسناد رویدادهای مودال را برای جزئیات بیشتر بخوانید relatedTarget.
New message
انیمیشن را تغییر دهید
$modal-fade-transformمتغیر حالت تبدیل قبل .modal-dialogاز انیمیشن محو شدن مودال را $modal-show-transformتعیین می کند، متغیر تبدیل .modal-dialogدر انتهای انیمیشن محو شدن مدال را تعیین می کند.
اگر به عنوان مثال یک انیمیشن بزرگنمایی می خواهید، می توانید تنظیم کنید $modal-fade-transform: scale(.8).
حذف انیمیشن
برای حالتهایی که بهجای محو شدن برای مشاهده، به سادگی ظاهر میشوند، .fadeکلاس را از نشانهگذاری مدال خود حذف کنید.
ارتفاعات پویا
اگر ارتفاع مدال در حین باز بودن تغییر کرد، باید $('#myModal').modal('handleUpdate')برای تنظیم مجدد موقعیت مدال در صورت ظاهر شدن نوار پیمایش، تماس بگیرید.
دسترسی
حتماً با aria-labelledby="..."ارجاع به عنوان مودال به اضافه کنید .modal. علاوه بر این، میتوانید شرحی از گفتگوی مودال خود با aria-describedbyدر ارائه دهید .modal. توجه داشته باشید که نیازی به اضافه کردن ندارید role="dialog"زیرا ما قبلاً آن را از طریق جاوا اسکریپت اضافه کرده ایم.
مدالها سه اندازه اختیاری دارند که از طریق کلاسهای اصلاحکننده در دسترس هستند تا روی یک قرار بگیرند .modal-dialog. این اندازهها در نقاط شکست مشخصی ایجاد میشوند تا از نوارهای اسکرول افقی در نماهای باریکتر جلوگیری کنند.
اندازه
کلاس
حداکثر عرض معین
کم اهمیت
.modal-sm
300px
پیش فرض
هیچ یک
500px
بزرگ
.modal-lg
800px
فوق العاده بزرگ
.modal-xl
1140px
مدال پیشفرض ما بدون کلاس اصلاحکننده، مودال اندازه «متوسط» را تشکیل میدهد.
Extra large modal
...
Large modal
...
Small modal
...
استفاده
افزونه مودال محتوای پنهان شما را در صورت تقاضا، از طریق ویژگی های داده یا جاوا اسکریپت تغییر می دهد. همچنین به نادیده گرفتن رفتار پیمایش پیشفرض اضافه .modal-openمیکند <body>و یک .modal-backdropناحیه کلیک برای رد کردن مدالهای نشانداده شده هنگام کلیک کردن در خارج از مدال ایجاد میکند.
از طریق ویژگی های داده
یک مودال را بدون نوشتن جاوا اسکریپت فعال کنید. data-toggle="modal"روی یک عنصر کنترلر، مانند یک دکمه، به همراه یک data-target="#foo"یا href="#foo"برای هدف قرار دادن یک مدال خاص برای جابجایی تنظیم کنید.
از طریق جاوا اسکریپت
myModalبا یک خط جاوا اسکریپت یک مدال با شناسه فراخوانی کنید :
گزینه ها
گزینه ها را می توان از طریق ویژگی های داده یا جاوا اسکریپت منتقل کرد. data-برای ویژگی های داده، نام گزینه را به مانند در ضمیمه کنید data-backdrop="".
نام
تایپ کنید
پیش فرض
شرح
پس زمینه
بولی یا رشته ای'static'
درست است، واقعی
Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
keyboard
boolean
true
Closes the modal when escape key is pressed
focus
boolean
true
Puts the focus on the modal when initialized.
show
boolean
true
Shows the modal when initialized.
Methods
Asynchronous methods and transitions
All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.
Activates your content as a modal. Accepts an optional options object.
.modal('toggle')
Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.bs.modal or hidden.bs.modal event occurs).
.modal('show')
Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.bs.modal event occurs).
.modal('hide')
Manually hides a modal. Returns to the caller before the modal has actually been hidden (i.e. before the hidden.bs.modal event occurs).
.modal('handleUpdate')
Manually readjust the modal’s position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).
.modal('dispose')
Destroys an element’s modal.
Events
Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <div class="modal">).
Event Type
Description
show.bs.modal
This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
shown.bs.modal
This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
hide.bs.modal
This event is fired immediately when the hide instance method has been called.
hidden.bs.modal
This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
hidePrevented.bs.modal
این رویداد زمانی اجرا میشود که مدال نشان داده میشود، پسزمینه آن است staticو یک کلیک در خارج از مدال یا فشار دادن کلید فرار با گزینه صفحه کلید انجام میشود یا data-keyboardروی false.