مکيه مواد ڏانهن وڃو Docs نيويگيشن ڏانھن وڃو
in English

ماڊل

لائٽ باڪسز، يوزر نوٽيفڪيشنز، يا مڪمل طور تي حسب ضرورت مواد لاءِ پنھنجي سائيٽ تي ڊائلاگ شامل ڪرڻ لاءِ بوٽ اسٽريپ جو JavaScript ماڊل پلگ ان استعمال ڪريو.

اهو ڪيئن ڪم ڪري ٿو

Bootstrap جي ماڊل جزو سان شروع ڪرڻ کان اڳ، ھيٺين کي پڙھڻ جي پڪ ڪريو جيئن اسان جي مينيو جا اختيار تازو تبديل ڪيا ويا آھن.

  • ماڊلز HTML، CSS، ۽ JavaScript سان ٺهيل آهن. اهي دستاويز ۾ موجود هر شيءِ تي رکيل آهن ۽ اسڪرول کي هٽائي ڇڏيندا آهن ته <body>جيئن ماڊل مواد اسڪرال بدران.
  • موڊل ”پس منظر“ تي ڪلڪ ڪرڻ سان پاڻمرادو موڊل بند ٿي ويندو.
  • بوٽ اسٽراپ هڪ وقت ۾ صرف هڪ ماڊل ونڊو کي سپورٽ ڪري ٿو. Nested ماڊلز سپورٽ نه ڪيا ويا آهن جيئن اسان سمجهون ٿا ته اهي خراب صارف تجربا آهن.
  • ماڊل استعمال ڪن ٿا position: fixed، جيڪي ڪڏهن ڪڏهن ان جي رينڊنگ بابت ڪجهه خاص ٿي سگهن ٿا. جڏهن به ممڪن هجي، توهان جي ماڊل HTML کي اعلي سطحي پوزيشن ۾ رکو ته ٻين عناصر کان امڪاني مداخلت کان بچڻ لاء. توهان ممڪن طور تي مسئلن ۾ هلندا جڏهن هڪ .modalٻئي مقرر ٿيل عنصر جي اندر اندر داخل ڪيو ويندو.
  • هڪ ڀيرو ٻيهر، جي ڪري position: fixed، موبائيل ڊوائيسز تي ماڊل استعمال ڪرڻ سان گڏ ڪجهه احتياط آهن. تفصيل لاءِ اسان جا برائوزر سپورٽ ڊاڪس ڏسو.
  • ان جي ڪري HTML5 ان جي سيمينٽڪس کي ڪيئن بيان ڪري ٿو، HTML autofocusوصف بوٽ اسٽريپ ماڊلز ۾ ڪو اثر ناهي. ساڳئي اثر حاصل ڪرڻ لاء، ڪجهه ڪسٽم جاوا اسڪرپٽ استعمال ڪريو:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
  myInput.focus()
})
ھن جزو جي متحرڪ اثر prefers-reduced-motionميڊيا جي سوال تي منحصر آھي. اسان جي پهچ واري دستاويزن جو گھٽ موشن سيڪشن ڏسو .

Demo ۽ استعمال جي رهنمائي لاء پڙهڻ رکو.

مثال

هيٺ ڏنل هڪ جامد ماڊل مثال آهي (مطلب اهو آهي position۽ displayختم ڪيو ويو آهي). شامل آهن ماڊل هيڊر، ماڊل باڊي (گهربل لاءِ padding)، ۽ ماڊل فوٽر (اختياري). اسان پڇون ٿا ته توهان ماڊل هيڊر شامل ڪريو برطرفي جي عملن سان جڏهن به ممڪن هجي، يا ٻيو واضح برطرفي وارو عمل مهيا ڪريو.

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-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-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-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-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

ڊگھي مواد کي ڇڪڻ

جڏهن ماڊل صارف جي ڏيک پورٽ يا ڊوائيس لاءِ تمام ڊگھا ٿي ويندا آهن، اهي پاڻ صفحي کان آزاد اسڪرول ڪندا آهن. هيٺ ڏنل ڊيمو کي ڏسو ته اسان جو مطلب ڇا آهي.

توھان پڻ ٺاھي سگھوٿا ھڪڙو اسڪرول قابل ماڊل جيڪو شامل .modal-dialog-scrollableڪرڻ سان ماڊل جسم کي اسڪرول ڪرڻ جي اجازت ڏئي ٿو .modal-dialog.

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

عمودي مرڪز

.modal-dialog-centeredشامل ڪريو .modal-dialogعمودي مرڪز ۾ ماڊل.

<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>

<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</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-bs-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 ms-auto">.col-md-4 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
      <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ms-auto">.col-md-6 .ms-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>

مختلف ماڊل مواد

ڇا توھان وٽ بٽڻ جو ھڪڙو گروپ آھي جيڪي سڀ ڪجھ ساڳيا ماڊل کي ٿورڙي مختلف مواد سان گڏ ڪن ٿا؟ استعمال ڪريو event.relatedTarget۽ HTML data-bs-*خاصيتون ماڊل جي مواد کي مختلف ڪرڻ لاءِ ان تي منحصر ڪري ٿو ته ڪهڙي بٽڻ تي ڪلڪ ڪيو ويو.

هيٺ ڏنل هڪ لائيو ڊيمو آهي جنهن جي پٺيان مثال HTML ۽ JavaScript. وڌيڪ معلومات لاءِ، پڙهو ماڊل واقعن جا دستاويز تفصيل لاءِ relatedTarget.

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <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-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
  // Button that triggered the modal
  var button = event.relatedTarget
  // Extract info from data-bs-* attributes
  var recipient = button.getAttribute('data-bs-whatever')
  // If necessary, you could initiate an AJAX request here
  // and then do the updating in a callback.
  //
  // Update the modal's content.
  var modalTitle = exampleModal.querySelector('.modal-title')
  var modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = 'New message to ' + recipient
  modalBodyInput.value = recipient
})

ماڊل جي وچ ۾ ٽوگل ڪريو

گھڻن ماڊلز جي وچ ۾ ٽگل ڪريو ڪجھ ھوشيار جڳھ data-bs-target۽ data-bs-toggleخاصيتن سان. مثال طور، توهان اڳ ۾ ئي کليل سائن ان موڊل مان پاسورڊ ري سيٽ موڊل کي ٽوگل ڪري سگهو ٿا. مھرباني ڪري نوٽ ڪريو گھڻا ماڊل ھڪ ئي وقت کليل نه ٿا ٿي سگھن - ھي طريقو صرف ٻن الڳ ماڊلن جي وچ ۾ ٽوگل ڪري ٿو.

پهريون ماڊل کوليو
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Hide this modal and show the first with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
      </div>
    </div>
  </div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>

انيميشن تبديل ڪريو

متغير ماڊل فيڊ-ان اينيميشن کان اڳ $modal-fade-transformجي بدلي واري حالت کي طئي ڪري ٿو ، متغير ماڊل فيڊ-ان اينيميشن جي آخر ۾ تبديلي کي طئي ڪري ٿو ..modal-dialog$modal-show-transform.modal-dialog

جيڪڏهن توهان چاهيو ٿا مثال طور هڪ زوم ان اينيميشن، توهان سيٽ ڪري سگهو ٿا $modal-fade-transform: scale(.8).

انيميشن کي هٽايو

ماڊلز لاءِ جيڪي ڏسڻ لاءِ منجهيل ٿيڻ بجاءِ ظاهر ٿين ٿا، .fadeڪلاس کي پنهنجي ماڊل مارڪ اپ مان هٽايو.

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

متحرڪ اونچائي

جيڪڏهن موڊل جي اوچائي تبديل ٿئي ٿي جڏهن اهو کليل آهي، توهان کي فون myModal.handleUpdate()ڪرڻ گهرجي ماڊل جي پوزيشن کي ٻيهر ترتيب ڏيڻ جي صورت ۾ جيڪڏهن اسڪرول بار ظاهر ٿئي.

پهچ

شامل ڪرڻ جي پڪ ڪريو aria-labelledby="..."، ماڊل عنوان جي حوالي سان، ڏانهن .modal. اضافي طور تي، توهان پنهنجي ماڊل ڊائلاگ جي وضاحت ڏئي سگهو ٿا aria-describedbyon سان .modal. ياد رکو ته توهان کي شامل ڪرڻ جي ضرورت ناهي role="dialog"ڇو ته اسان پهريان ئي جاوا اسڪرپٽ ذريعي شامل ڪيو آهي.

يوٽيوب وڊيوز شامل ڪرڻ

يوٽيوب وڊيوز کي ماڊلز ۾ شامل ڪرڻ لاءِ اضافي جاوا اسڪرپٽ جي ضرورت آھي نه بوٽ اسٽريپ ۾ خود بخود پلے بیک ۽ وڌيڪ بند ڪرڻ لاءِ. وڌيڪ معلومات لاءِ هي مددگار اسٽيڪ اوور فلو پوسٽ ڏسو .

اختياري سائيز

ماڊلز وٽ ٽي اختياري سائز آھن، ميڊيفائر ڪلاسز ذريعي دستياب آھن .modal-dialog. اهي سائيز ڪجهه وقفي پوائنٽن تي داخل ٿين ٿا ته جيئن تنگ ڏيک واري بندرگاهن تي افقي اسڪرول بار کان بچڻ لاءِ.

ماپ ڪلاس ماڊل وڌ ۾ وڌ ويڪر
ننڍو .modal-sm 300px
ڊفالٽ ڪو به 500px
وڏو .modal-lg 800px
اضافي وڏو .modal-xl 1140px

اسان جو ڊفالٽ ماڊل بغير تبديل ڪندڙ ڪلاس جي ”ميڊيم“ سائيز جو ماڊل ٺھي ٿو.

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

مڪمل اسڪرين ماڊل

هڪ ٻيو اوور رائڊ اختيار آهي هڪ ماڊل پاپ اپ ڪرڻ جو جيڪو يوزر ويوپورٽ کي پکڙيل آهي، ميڊيفائر ڪلاسن ذريعي دستياب آهي جيڪي هڪ تي رکيل آهن .modal-dialog.

ڪلاس دستيابي
.modal-fullscreen هميشه
.modal-fullscreen-sm-down هيٺيون576px
.modal-fullscreen-md-down هيٺيون768px
.modal-fullscreen-lg-down هيٺيون992px
.modal-fullscreen-xl-down هيٺيون1200px
.modal-fullscreen-xxl-down هيٺيون1400px
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

ساس

متغير

$modal-inner-padding:               $spacer;

$modal-footer-margin-between:       .5rem;

$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;

$modal-title-line-height:           $line-height-base;

$modal-content-color:               null;
$modal-content-bg:                  $white;
$modal-content-border-color:        rgba($black, .2);
$modal-content-border-width:        $border-width;
$modal-content-border-radius:       $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       $box-shadow-sm;
$modal-content-box-shadow-sm-up:    $box-shadow;

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;
$modal-header-border-color:         $border-color;
$modal-footer-border-color:         $modal-header-border-color;
$modal-header-border-width:         $modal-content-border-width;
$modal-footer-border-width:         $modal-header-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

لوپ

جوابي فل اسڪرين ماڊل ٺاهيا ويا آهن نقشي ذريعي $breakpoints۽ هڪ لوپ اندر scss/_modal.scss.

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  $postfix: if($infix != "", $infix + "-down", "");

  @include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }

      .modal-footer {
        @include border-radius(0);
      }
    }
  }
}

استعمال

موڊل پلگ ان توهان جي پوشیدہ مواد کي مطالبن تي، ڊيٽا جي خاصيتن يا جاوا اسڪرپٽ ذريعي ٽوگل ڪري ٿو. اهو پڻ ڊفالٽ اسڪرولنگ رويي کي ختم ڪري ٿو ۽ ٺاهي ٿو .modal-backdropهڪ ڪلڪ ايريا مهيا ڪرڻ لاءِ ڏيکاريل ماڊل کي رد ڪرڻ لاءِ جڏهن ماڊل کان ٻاهر ڪلڪ ڪيو وڃي.

ڊيٽا خاصيتن جي ذريعي

ٽوگل

جاوا اسڪرپٽ لکڻ کان سواءِ موڊل چالو ڪريو. هڪ ڪنٽرولر عنصر تي سيٽ ڪريو data-bs-toggle="modal"، هڪ بٽڻ وانگر، هڪ سان گڏ data-bs-target="#foo"يا href="#foo"هڪ مخصوص ماڊل کي ٽارگيٽ ڪرڻ لاء.

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

برطرف

برطرفي حاصل ڪري سگهجي ٿي dataخاصيت سان هڪ بٽڻ تي موڊل اندر جيئن هيٺ ڏيکاريل آهي:

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

يا ماڊل جي ٻاهران هڪ بٽڻ تي استعمال ڪندي data-bs-targetجيئن هيٺ ڏيکاريل آهي:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
جڏهن ته ماڊل کي رد ڪرڻ جا ٻئي طريقا سپورٽ آهن، ذهن ۾ رکو ته ماڊل جي ٻاهران برطرفي WAI-ARIA ماڊل ڊائلاگ ڊيزائن جي نموني سان نه ٿي ملي . اهو توهان جي پنهنجي خطري تي ڪريو.

جاوا اسڪرپٽ ذريعي

جاوا اسڪرپٽ جي ھڪڙي لائن سان ھڪڙو ماڊل ٺاھيو:

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

اختيارن

اختيارن کي ڊيٽا جي خاصيتن يا جاوا اسڪرپٽ ذريعي منظور ڪري سگھجي ٿو. ڊيٽا جي خاصيتن لاء، اختيار جو نالو شامل ڪريو data-bs-، جيئن data-bs-backdrop="".

نالو قسم ڊفالٽ وصف
backdrop boolean يا تار'static' true هڪ ماڊل پس منظر عنصر شامل آهي. متبادل طور تي، staticھڪڙي پس منظر لاءِ وضاحت ڪريو جيڪو ڪلڪ ڪرڻ تي ماڊل کي بند نٿو ڪري.
keyboard بولين true موڊل کي بند ڪري ٿو جڏهن فرار ڪيچ کي دٻايو ويندو آهي
focus بولين true موڊل تي ڌيان ڏئي ٿو جڏهن شروع��ت ڪئي وئي.

طريقا

هم وقت سازي طريقا ۽ منتقلي

سڀ API طريقا غير مطابقت رکندڙ آهن ۽ هڪ منتقلي شروع ڪن ٿا . اهي ڪالر ڏانهن واپس ويندا آهن جيئن ئي منتقلي شروع ٿئي ٿي پر ان کان اڳ ختم ٿي وڃي . ان کان علاوه، هڪ طريقو ڪال هڪ منتقلي جزو تي نظر انداز ڪيو ويندو .

وڌيڪ معلومات لاءِ اسان جا JavaScript دستاويز ڏسو .

پاس ڪرڻ جا اختيار

توهان جي مواد کي ماڊل طور چالو ڪري ٿو. اختياري اختيارن کي قبول ڪري ٿو object.

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})

ٽوگل ڪرڻ

دستي طور تي ماڊل کي ٽوگل ڪري ٿو. موڊل اصل ۾ ڏيکاريل يا لڪايو ويو آهي (يعني واقعي کان اڳ يا واقع ٿيڻ کان اڳ) ڪالر ڏانهن واپسي .shown.bs.modalhidden.bs.modal

myModal.toggle()

ڏيکارڻ

دستي طور تي هڪ ماڊل کوليو. موڊل اصل ۾ ڏيکاريو ويو کان اڳ ڪالر ڏانهن واپسي (يعني shown.bs.modalواقعي ٿيڻ کان اڳ).

myModal.show()

انهي سان گڏ، توهان هڪ DOM عنصر کي هڪ دليل جي طور تي پاس ڪري سگهو ٿا جيڪو حاصل ڪري سگهجي ٿو ماڊل واقعن ۾ (جيئن relatedTargetملڪيت).

var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)

لڪائڻ

دستي طور تي هڪ ماڊل لڪائي ٿو. ڪالر ڏانهن موٽڻ کان اڳ ماڊل اصل ۾ لڪايو ويو آهي (يعني hidden.bs.modalواقعي ٿيڻ کان اڳ).

myModal.hide()

handleUpdate

دستي طور تي ماڊل جي پوزيشن کي ترتيب ڏيو جيڪڏهن ماڊل جي اوچائي تبديل ٿئي ٿي جڏهن اهو کليل هجي (يعني صورت ۾ هڪ اسڪرول بار ظاهر ٿئي).

myModal.handleUpdate()

نيڪال ڪرڻ

هڪ عنصر جي ماڊل کي تباهه ڪري ٿو. (ڊوم عنصر تي ذخيرو ٿيل ڊيٽا کي هٽائي ٿو)

myModal.dispose()

getInstance

جامد طريقو جيڪو توهان کي DOM عنصر سان لاڳاپيل ماڊل مثال حاصل ڪرڻ جي اجازت ڏئي ٿو

var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance

getOrCreateInstance

جامد طريقو جيڪو توهان کي DOM عنصر سان لاڳاپيل ماڊل مثال حاصل ڪرڻ جي اجازت ڏئي ٿو، يا هڪ نئون ٺاهيو جيڪڏهن اهو شروع نه ڪيو ويو هجي

var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance

واقعا

بوٽ اسٽريپ جو ماڊل ڪلاس ڪجھ واقعن کي ظاهر ڪري ٿو ماڊل ڪارڪردگي ۾ ڇڪڻ لاءِ. سڀئي ماڊل واقعا پاڻ موڊل تي فائر ڪيا ويا آهن (يعني تي <div class="modal">).

واقعي جو قسم وصف
show.bs.modal اهو واقعو فوري طور تي فائر ڪندو آهي جڏهن showمثال جو طريقو سڏيو ويندو آهي. جيڪڏهن هڪ ڪلڪ جي ڪري، ڪلڪ ٿيل عنصر relatedTargetواقعي جي ملڪيت جي طور تي موجود آهي.
shown.bs.modal هي واقعو فائر ڪيو ويو آهي جڏهن ماڊل استعمال ڪندڙ کي ظاهر ڪيو ويو آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو). جيڪڏهن هڪ ڪلڪ جي ڪري، ڪلڪ ٿيل عنصر relatedTargetواقعي جي ملڪيت جي طور تي موجود آهي.
hide.bs.modal اهو واقعو فوري طور تي فائر ڪيو ويو آهي جڏهن hideمثال جو طريقو سڏيو ويو آهي.
hidden.bs.modal اهو واقعو فائر ڪيو ويندو آهي جڏهن ماڊل ختم ٿي چڪو آهي صارف کان لڪيل آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو).
hidePrevented.bs.modal هي واقعو فائر ڪيو ويندو آهي جڏهن ماڊل ڏيکاريو ويندو آهي، ان جو پسمنظر هوندو آهي static۽ ماڊل جي ٻاهران هڪ ڪلڪ ڪيو ويندو آهي يا ڪيبورڊ اختيار سان هڪ فرار ڪيئي پريس ڪيو ويندو آهي يا data-bs-keyboardسيٽ ڪيو ويندو آهي false.
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})