راهنمای استفاده از مدال

نمایش دموی مدال

مدال ها در چهار اندازه قابل استفاده هستند؛ برای مشاهده سایر اندازه ها بر روی دکمه های زیر کلیک کنید. جهت تغییر اندازه مدال کافی است یکی از کلاس های modal-sm، modal-lg و یا modal-xl را در کنار کلاس modal-dialog قرار دهید.

نمونه کد:

<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-success btn-medium">Save changes</button>
        <button type="button" class="btn btn-secondary btn-small" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

برای فعال سازی مدال مشابه زیر عمل کنید.

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

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

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

برای مطالعه بیشتر در مورد نحوه استفاده از مدال به سند بوت استرپ مراجعه کنید.