بوت اسٹرپ 5 ماڈل

مودال

Modal یہ ایک ڈیالوگ/پرچم ہے جو موجودہ ویب پیج کی اوپر دکھایا جاتا ہے:

کیسے ماڈل بنایا جاتا ہے

یہ مثال دکھاتا ہے کہ کیسے بنایا جاتا ہے:

مثال

<!-- ماڈل کھولنے کیلئے کا بٹن -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  ماڈل کھولنے کیلئے
</button>
<!-- ماڈل -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- ماڈل کا عنوان -->
      <div class="modal-header">
        <h4 class="modal-title">ماڈل کا عنوان</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <!-- ماڈل کا جسم -->
      <div class="modal-body">
        ماڈل کا جسم ..
      </div>
      <!-- ماڈل پیچھے -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">بند کرنے کیلئے</button>
      </div>
    </div>
  </div>
</div>

خود کا تجربہ کریں

استعمال کریں

آمدو رفت دینے کیلئے .fade کلاس کو کھولنے اور بند کرنے کے وقت آمدو رفت اثر دینے کیلئے شامل کریں:

مثال

<!-- آمدو رفت ماڈل -->
<div class="modal fade"></div>
<!-- ماڈل بغیر آمدو رفت -->
<div class="modal"></div>

خود کا تجربہ کریں

ماڈل کی سائز

چھوٹا ماڈل کو شامل کرکے .modal-sm کلاس (کمترین وسیع 300px) اور بڑا ماڈل شامل کریں .modal-lg کلاس (کمترین وسیع 800px) یا بہت بڑا ماڈل شامل کریں .modal-xl کو استعمال کرکے ماڈل کی بڑائی بدل سکتے ہیں (کمترین وسیع 1140 پیکسل)۔ دفعتی طور پر 500 پیکسل کا کمترین وسیع دیکھا جاتا ہے。

آپ کو .modal-dialog کلاس اور سائز کلاس کو ایک ساتھ شامل کریں <div> عنصر:

چھوٹا ماڈل

<div class="modal-dialog modal-sm">

خود کا تجربہ کریں

بڑا ماڈل

<div class="modal-dialog modal-lg">

خود کا تجربہ کریں

ایک ساتھ بڑا مودل

<div class="modal-dialog modal-xl">

خود کا تجربہ کریں

تخمایی طور پر، مودل کی پیمائش "medium" (500px مکمل وسیع پیمائش) ہوتی ہے۔

پورا اسکرین مودل

اگر آپ چاہتے ہیں کہ مودل پورا صفحہ کی پیمائش کو پورا کر سکے تو، .modal-fullscreen کلاس:

مثال

<div class="modal-dialog modal-fullscreen">

خود کا تجربہ کریں

جوابی پورا اسکرین مودل

آپ کسی طرح سے .modal-fullscreen-*-* کلاس کنٹرول مودل کو کبھی پورا اسکرین پر دکھایا جانا چاہئے یا نہیں:

کلاس وصف مثال
.modal-fullscreen-sm-down 576 پیکسس سے نیچے پورا اسکرین خود کا تجربہ کریں
.modal-fullscreen-md-down 768 پیکسس سے نیچے پورا اسکرین خود کا تجربہ کریں
.modal-fullscreen-lg-down 992 پیکسس سے نیچے پورا اسکرین خود کا تجربہ کریں
.modal-fullscreen-xl-down 1200 پیکسس سے نیچے پورا اسکرین خود کا تجربہ کریں
.modal-fullscreen-xxl-down 1400 پیکسس سے نیچے پورا اسکرین خود کا تجربہ کریں

وسط میں لگا لگا مودل

استعمال کے ذریعے .modal-dialog-centric کلاس، مودل کو صفحہ کے اندر عمودی اور افقی طور پر وسط میں لگا لگا ہو سکتا ہے:

مثال

<div class="modal-dialog modal-dialog-centered">

خود کا تجربہ کریں

مودل سکرول

جب مودل میں بہت سارا مطلب ہوتا ہے تو، یہ صفحہ میں ایک سکرول بار اضافہ کرتا ہے۔ درج ذیل مثال دیکھیں تاکہ سمجھ سکیں:

مثال

<div class="modal-dialog">

خود کا تجربہ کریں

لیکن، اس کے ذریعے .modal-dialog-scrollable منظور میں لائیں .modal-dialog فقط مودل کے اندر لگا لگا ہو سکتا ہے، نہ کہ صفحہ کی خود جگہ پر:

مثال

<div class="modal-dialog modal-dialog-scrollable">

خود کا تجربہ کریں