مدال

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

در این صفحه

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

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

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

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

myModal.addEventListener('shown.bs.modal', function () {
  myInput.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="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-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-bs-toggle="modal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-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-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop 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">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-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-bs-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 ms-auto">.col-md-4 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
      <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ms-auto">.col-md-6 .ms-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 و برای تغییر محتویات مدال بسته به اینکه روی کدام دکمه کلیک شده است استفاده کنید.data-bs-*

در زیر یک نسخه آزمایشی زنده و به دنبال آن HTML و جاوا اسکریپت وجود دارد. برای اطلاعات بیشتر، اسناد رویدادهای مودال را برای جزئیات بیشتر بخوانید relatedTarget.

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <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-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
  // Button that triggered the modal
  var button = event.relatedTarget
  // Extract info from data-bs-* attributes
  var recipient = button.getAttribute('data-bs-whatever')
  // If necessary, you could initiate an AJAX request here
  // and then do the updating in a callback.
  //
  // Update the modal's content.
  var modalTitle = exampleModal.querySelector('.modal-title')
  var modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = 'New message to ' + recipient
  modalBodyInput.value = recipient
})

جابجایی بین حالت‌ها

جابه‌جایی بین حالت‌های چندگانه با قرار دادن هوشمندانه ویژگی‌های data-bs-targetو . data-bs-toggleبرای مثال، می‌توانید یک مودال بازنشانی رمز عبور را از داخل یک مودال که قبلاً باز شده است تغییر دهید. لطفاً توجه داشته باشید که چندین مدال نمی توانند همزمان باز شوند - این روش به سادگی بین دو مدال جداگانه جابجا می شود.

اولین مدال را باز کنید

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button>
      </div>
    </div>
  </div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

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

$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.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-dialogدسترس است.

کلاس	دسترسی
`.modal-fullscreen`	همیشه
`.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`

<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

ساس

متغیرها

$modal-inner-padding:               $spacer;

$modal-footer-margin-between:       .5rem;

$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;

$modal-title-line-height:           $line-height-base;

$modal-content-color:               null;
$modal-content-bg:                  $white;
$modal-content-border-color:        rgba($black, .2);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $box-shadow;

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;
$modal-header-border-color:         $border-color;
$modal-footer-border-color:         $modal-header-border-color;
$modal-header-border-width:         $modal-content-border-width;
$modal-footer-border-width:         $modal-header-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

حلقه

مدال های تمام صفحه پاسخگو از طریق $breakpointsنقشه و یک حلقه در ایجاد می scss/_modal.scssشوند.

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  $postfix: if($infix != "", $infix + "-down", "");

  @include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }

      .modal-footer {
        @include border-radius(0);
      }
    }
  }
}

استفاده

The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also overrides default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.

Via data attributes

Activate a modal without writing JavaScript. Set data-bs-toggle="modal" on a controller element, like a button, along with a data-bs-target="#foo" or href="#foo" to target a specific modal to toggle.

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

Via JavaScript

Create a modal with a single line of JavaScript:

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-bs-, as in data-bs-backdrop="".

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.

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.

Passing options

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

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})

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

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

Also, you can pass a DOM element as an argument that can be received in the modal events (as the relatedTarget property).

var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)

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

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

dispose

Destroys an element’s modal. (Removes stored data on the DOM element)

myModal.dispose()

getInstance

Static method which allows you to get the modal instance associated with a DOM element

var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance

getOrCreateInstance

Static method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn’t initialised

var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance

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`	This event is fired when the modal is shown, its backdrop is `static` and a click outside the modal or an escape key press is performed with the keyboard option or `data-bs-keyboard` set to `false`.

var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})