Source

معین

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

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

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

  • مدال ها با HTML، CSS و جاوا اسکریپت ساخته می شوند. آنها بر روی هر چیز دیگری در سند قرار می گیرند و اسکرول را از آن حذف می کنند <body>تا محتوای مدال به جای آن اسکرول شود.
  • با کلیک بر روی "پس زمینه" مدال به طور خودکار مودال بسته می شود.
  • بوت استرپ هر بار فقط از یک پنجره مودال پشتیبانی می کند. حالت‌های تودرتو پشتیبانی نمی‌شوند، زیرا ما معتقدیم که آنها تجربه کاربری ضعیفی هستند.
  • Modals استفاده می‌کنند position: fixed، که گاهی اوقات می‌تواند در مورد رندر آن کمی خاص باشد. در صورت امکان، HTML مدال خود را در یک موقعیت سطح بالا قرار دهید تا از تداخل احتمالی عناصر دیگر جلوگیری شود. احتمالاً هنگام قرار دادن یک .modalعنصر در یک عنصر ثابت دیگر با مشکلاتی مواجه خواهید شد.
  • بار دیگر، با توجه به position: fixed, برخی از هشدارها در مورد استفاده از مدال در دستگاه های تلفن همراه وجود دارد. برای جزئیات به اسناد پشتیبانی مرورگر ما مراجعه کنید .
  • با توجه به اینکه HTML5 چگونه معنایی خود را تعریف می کند، ویژگی autofocusHTML هیچ تاثیری در مدال های Bootstrap ندارد. برای رسیدن به همان اثر، از جاوا اسکریپت سفارشی استفاده کنید:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

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

مثال ها

در زیر یک مثال مودال ایستاposition (به معنی آن و displayلغو شده است) آمده است. شامل سرصفحه مودال، بدنه مودال (الزامی برای padding) و پاورقی مودال (اختیاری) است. ما از شما می‌خواهیم که در صورت امکان، سرصفحه‌های معین را با کنش‌های رد کردن درج کنید، یا اقدام رد صریح دیگری ارائه دهید.

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

پیمایش مطالب طولانی

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

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

عمودی در مرکز

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

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

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

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

حذف انیمیشن

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

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

ارتفاعات پویا

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

دسترسی

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

جاسازی ویدیوهای یوتیوب

جاسازی ویدیوهای YouTube در حالت‌ها به جاوا اسکریپت اضافی نیاز دارد که در بوت استرپ نباشد تا به طور خودکار بازپخش و موارد دیگر متوقف شود. برای اطلاعات بیشتر به این پست مفید Stack Overflow مراجعه کنید .

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

مدال ها دو اندازه اختیاری دارند که از طریق کلاس های اصلاح کننده در دسترس هستند تا روی یک قرار بگیرند .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>و یک .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.modalhidden.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.bs.modal این رویداد بلافاصله پس از showفراخوانی متد نمونه فعال می شود. اگر ناشی از کلیک باشد، عنصر کلیک شده به عنوان relatedTargetویژگی رویداد در دسترس است.
نشان داده شده.bs.modal این رویداد زمانی فعال می شود که مدال برای کاربر قابل مشاهده باشد (منتظر تکمیل انتقال CSS می شود). اگر ناشی از کلیک باشد، عنصر کلیک شده به عنوان relatedTargetویژگی رویداد در دسترس است.
hide.bs.modal این رویداد بلافاصله پس از hideفراخوانی متد نمونه فعال می شود.
hidden.bs.modal این رویداد زمانی فعال می شود که مودال از کاربر پنهان شود (منتظر تکمیل انتقال CSS می شود).
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})