Source

ماڊل

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

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

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

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

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

ھن جزو جي متحرڪ اثر prefers-reduced-motionميڊيا جي سوال تي منحصر آھي. اسان جي پهچ واري دستاويزن جو گھٽ موشن سيڪشن ڏسو .

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

مثال

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

<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-secondary" data-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-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">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">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-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-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">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">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

عمودي مرڪز

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

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">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">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</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-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 ml-auto">.col-md-4 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
      <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ml-auto">.col-md-6 .ml-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-*خاصيتون (ممڪن طور تي jQuery ذريعي ) ماڊل جي مواد کي مختلف ڪرڻ لاءِ ان تي منحصر آهي ته ڪهڙي بٽڻ تي ڪلڪ ڪيو ويو.

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

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

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <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-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

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

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

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

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

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

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

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

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

پهچ

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

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

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

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

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

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

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

<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>

<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

استعمال

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

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

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

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

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

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

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

اختيارن

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

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

طريقا

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

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

See our JavaScript documentation for more information.

`.modal(options)`

Activates your content as a modal. Accepts an optional options object.

$('#myModal').modal({
  keyboard: false
})

`.modal('toggle')`

Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.bs.modal or hidden.bs.modal event occurs).

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

`.modal('show')`

Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.bs.modal event occurs).

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

`.modal('hide')`

Manually hides a modal. Returns to the caller before the modal has actually been hidden (i.e. before the hidden.bs.modal event occurs).

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

`.modal('handleUpdate')`

Manually readjust the modal’s position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).

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

`.modal('dispose')`

Destroys an element’s modal.

Events

Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <div class="modal">).

Event Type	Description
show.bs.modal	This event fires immediately when the `show` instance method is called. If caused by a click, the clicked element is available as the `relatedTarget` property of the event.
shown.bs.modal	This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the `relatedTarget` property of the event.
hide.bs.modal	This event is fired immediately when the `hide` instance method has been called.
hidden.bs.modal	اهو واقعو فائر ڪيو ويندو آهي جڏهن ماڊل ختم ٿي چڪو آهي صارف کان لڪيل آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو).

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})