آموزش بوت استرپ
راهنمای جامع و آموزش گام به گام طراحی قالب وبسایت با bootstrap

چگونه کار می کند؟

قبل از شروع کار با Component modal بوت استرپ، مطمئن شوید که گزینه های منو را به تازگی تغییر داده اید.

1-Modals با HTML، CSS و جاوا اسکریپت ساخته شده اند. آنها بیش از هر چیز دیگری در سند قرار دارند و اسکرول را از <body> حذف می کنند تا محتوا به جای آن حرکت کند.

2-کلیک بر روی "background" modal به طور خودکار مودال را می بندد.

3-بوت استرپ فقط یک پنجره مدال را در یک زمان پشتیبانی می کند. مودال های مضر پشتیبانی نمی شوند، زیرا ما اعتقاد داریم که آنها تجربیات کاربر ضعیف هستند.

4-Modals  position: fixedثابت، که گاهی اوقات می تواند کمی در مورد رندر آن است. هر گاه امکان پذیر است، HTML خود را در موقعیت بالا قرار دهید تا از دخالت بالقوه عناصر دیگر جلوگیری شود. شما احتمالا در هنگام نصب یک Modal در یک عنصر ثابت دیگر به مسائل وارد می شوید.

5-یک بار دیگر، با توجه به  position: fixed شده است، برخی از مخالفت با استفاده از modals در دستگاه های تلفن همراه وجود دارد. برای اطلاعات بیشتر به اسناد پشتیبانی مرورگر مراجعه کنید.

6-به دلیل اینکه HTML5 معانی آن را تعریف می کند، ویژگی Autofocus HTML در Modals Bootstrap تاثیر نمی گذارد. برای رسیدن به همان اثر، از برخی از جاوا اسکریپتهای سفارشی استفاده کنید:

خواندن دستورالعمل های دمو و دستورالعمل استفاده را بخوانید.

 $('#myModal').on('shown.bs.modal', function () { $('#myInput').trigger('focus') })

 

مثال ها 

اجزای مدال

در زیر یک مثال استاتیک شامل هدر مدال، بدنه مودال و بالا و فوتر مودال است. ما از شما میپرسیم که هر زمان که ممکن است هدرهای مودال را با اقدامات اخراج وارد کنید، یا یک عمل منفرد دیگر را ارائه دهید.

 

 <div class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <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">&times;</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-primary">Save changes</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <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">&times;</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>

 

پیمایش محتوای طولانی 

زمانی که modals برای نمای دید کاربر یا دستگاه کاربر بیش از حد طول می کشد، آنها مستقل از صفحه خود حرکت می کنند. Demo زیر را امتحان کنید تا ببینید چه می شود.

 <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</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>

 

عمودی محور 

افزودن Module-dialog-centered. به modal-dialog. برای عمودی مرجع است.

 <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</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>

 

راهنمای ابزار 

راهنمای ابزار و popovers را می توان در داخل modals در صورت نیاز قرار داده است. هنگامی که Modals بسته می شوند، هر گونه راهنمای ابزار و popovers در داخل نیز به طور خودکار خارج می شوند.

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

 

با استفاده از شبکه 

استفاده از سیستم شبکه بوت استرپ در یک مودال. از کانتینر ها  داخل بدن modal. سپس، از کلاس های سیستم شبکه عادی استفاده کنید.

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

 

محتوای متنوع متغییر 

آیا یک دسته از دکمه های که همه یک modal همان با محتویات کمی متفاوت باعث می شود؟ از ویژگی های event.relatedTarget و HTML data استفاده کنید  برای تغییر محتویات modal بسته به کدام دکمه کلیک کنید.

در زیر یک نسخه ی نمایشی زنده به دنبال مثال HTML و جاوا اسکریپت است. 

 <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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <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">&times;</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) })

 

حذف انیمیشن

برای modals که به سادگی به نظر می رسد به جای محو شدن در نمایش، کلاس fade مودال خود حذف کنید.

 <div class="modal" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true"> ... </div>

 

ارتفاع پویا 

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

 

دسترس پذیری 

اطمینان حاصل کنید که: "role = "dialog و aria-labelledby = "..."، با اشاره به عنوان modal، به.modal. و "role = "document به خود modal dialog. اضافه کنید. ، شما می توانید یک توضیح از گفتگوی مودال خود را با aria-توصیف شده در modal. شرح دهید.

 

بستن ویدیو های یوتیوب

جاسازی ویدیوهای یوتیوب در modals نیازمند جاوا اسکریپت اضافی در Bootstrap نیست، به طور خودکار توقف پخش و بیشتر. برای اطلاعات بیشتر.

 

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

Modals دارای دو اندازه اختیاری هستند که از طریق کلاس های اصلاح کننده در کادر Modal-dialog قرار می گیرند. این اندازه ها در نقاطی از نقطه توقف برای جلوگیری از اسکرولهای افقی در مناطق دیداری باریک ضربه می زنند.

 <!-- Large modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button> <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> ... </div> </div> </div> <!-- Small modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button> <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> ... </div> </div> </div>

 

استفاده 

پلاگین مجاز محتوای مخفی خود را بر اساس تقاضا، از طریق ویژگیهای داده یا جاوا اسکریپت، تغییر می دهد. همچنین می افزاید: modal-open. به <body> برای برچیدن رفتار پیمایش پیشین و ایجاد یک پس زمینه مد. برای ایجاد یک منطقه کلیک برای رد Modals نمایش داده شده استفاده می شود.

استفاده از ویژگی داده 

یک مدلا را بدون نوشتن جاوا اسکریپت فعال کنید "set-data-toggle = "modal را بر روی یک عنصر کنترل، مثل یک دکمه، همراه با "data-target = "# foo یا "href = "# foo قرار دهید تا یک modal خاص را انتخاب کنید تا تغییر دهید.

 <button type="button"  data-toggle="modal" data-target="#myModal">Launch modal</button>

 

با استفاده از جاوا اسکریپت

یک مدال با id myModal با یک خط از جاوا اسکریپت فراخوانی می شود.

 $('#myModal').modal(options)

 

گزینه ها

گزینه ها می توانند از طریق ویژگی های داده یا جاوا اسکریپت منتقل شوند. برای ویژگی های داده، نام گزینه را به داده اضافه کنید، همانطور که در "background-data-data = " هستند.

Name Type Default Description
backdrop boolean or the string 'static' true 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.

 

متد ها 

.modal(options)

محتوای شما را به عنوان یک مدال فعال می کند یک شی گزینه های اختیاری را قبول می کند

 $('#myModal').modal({ keyboard: false })

 

.modal('toggle')

به صورت دستی یک مدال را تغییر می دهد قبل از اینکه مدال نشان داده شده یا پنهان شود، فراخوانده شود.

 $('#myModal').modal('toggle')

 

.modal('show')

دستی یک مودال را باز می کند قبل از اینکه مدال نشان داده شود، فراخوانده شود.

 $('#myModal').modal('show')

 

.modal('hide')

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

 $('#myModal').modal('hide')

 

.modal('handleUpdate')

اگر ارتفاع مودال تغییر کند در حالی که باز است، به صورت دستی تنظیم موقعیت مودال را تغییر دهید

 $('#myModal').modal('handleUpdate')

 

.modal('dispose')

یک عنصر را از بین می برد.

 

مناسبت ها 

کلاس 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).
 $('#myModal').on('hidden.bs.modal', function (e) { // do something... })