Modal در Bootstrap ورژن 4

جزء Modal یک جعبه محاوره ای / پنجره ای است که در بالای صفحه فعلی نمایش داده می شود:

Open modal

 

چگونه یک Modal ایجاد کنیم

مثال زیر نشان می دهد که چگونه یک Modal ساده ایجاد کنید:

ایجاد Modal
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open modal
</button>

<!-- The Modal -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>
مشاهده مثال

سایز Modal

تغییر اندازه Modal با افزودن کلاس modal-sm برای modal کوچک یا کلاس modal-lg برای modals بزرگ.

کلاس اندازه را به عنصر <div> با کلاس modal-dialog اضافه کنید.

سایز Modal
<div class="modal-dialog modal-sm">
مشاهده مثال

 

سایز بزرگ Modal
<div class="modal-dialog modal-lg">
مشاهده مثال

به طور پیش فرض، Modal ها در اندازه متوسط هستند.

Modal متمرکز

محدوده مدال را به صورت عمودی و افقی داخل صفحه، با کلاس .modal-dialog-centered:قرار دهید

modal متمرکز
<div class="modal-dialog modal-dialog-centered">
مشاهده مثال

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط