|||

ورود به حساب کاربری

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

در صورت فراموشی کلمه عبور شماره موبایل خود را وارد کنید.

ورود با کلمه عبور تنظیم مجدد

ورود به حساب کاربری

در صورتی که کلمه عبور خود را بروزرسانی کرده اید با کلمه عبور وارد حساب کاربری خود شوید.

شماره همراه خود را وارد کنید

ورود و ادامه

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">
مشاهده مثال

 

نظر شما

مقالات و دروس

برای پروژه‌ی خود مشاوره رایگان بگیرید

طراحی سایت، توسعه نرم‌افزار، اتوماسیون و شبکه؛ با کارشناسان شرکت نرم‌افزاری وب مهراز در ارتباط باشید.

درخواست مشاوره

مقالات مرتبط

|||

ورود به حساب کاربری

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

در صورت فراموشی کلمه عبور شماره موبایل خود را وارد کنید.

ورود با کلمه عبور تنظیم مجدد