in English

مدال

از افزونه مودال جاوا اسکریپت Bootstrap برای افزودن دیالوگ هایی به سایت خود برای لایت باکس ها، اعلان های کاربر یا محتوای کاملاً سفارشی استفاده کنید.

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

قبل از شروع کار با مؤلفه مدال بوت استرپ، حتماً موارد زیر را بخوانید زیرا گزینه های منو اخیراً تغییر کرده اند.

  • مدال ها با HTML، CSS و جاوا اسکریپت ساخته می شوند. آنها بر روی هر چیز دیگری در سند قرار می گیرند و اسکرول را از آن حذف می کنند <body>تا محتوای مدال به جای آن اسکرول شود.
  • با کلیک بر روی "پس زمینه" مدال به طور خودکار مودال بسته می شود.
  • بوت استرپ هر بار فقط از یک پنجره مودال پشتیبانی می کند. حالت‌های تودرتو پشتیبانی نمی‌شوند، زیرا ما معتقدیم که آنها تجربه کاربری ضعیفی هستند.
  • Modals استفاده می‌کنند position: fixed، که گاهی اوقات می‌تواند در مورد رندر آن کمی خاص باشد. در صورت امکان، HTML مدال خود را در یک موقعیت سطح بالا قرار دهید تا از تداخل احتمالی عناصر دیگر جلوگیری شود. احتمالاً هنگام قرار دادن یک .modalعنصر در یک عنصر ثابت دیگر با مشکلاتی مواجه خواهید شد.
  • بار دیگر، با توجه به position: fixed, برخی از هشدارها در مورد استفاده از مدال در دستگاه های تلفن همراه وجود دارد. برای جزئیات به اسناد پشتیبانی مرورگر ما مراجعه کنید .
  • با توجه به اینکه HTML5 چگونه معنایی خود را تعریف می کند، ویژگی autofocusHTML هیچ تاثیری در مدال های 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">&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-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">&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>

پس زمینه ایستا

وقتی پس‌زمینه روی استاتیک تنظیم می‌شود، مودال هنگام کلیک کردن در خارج از آن بسته نمی‌شود. روی دکمه زیر کلیک کنید تا آن را امتحان کنید.

<!-- 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">&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">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">&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)
})

انیمیشن را تغییر دهید

$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' درست است، واقعی 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.

See our JavaScript documentation for more information.

.modal(options)

Activates your content as a modal. Accepts an optional options object.

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

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

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

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

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

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

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

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

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

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