in English

ماڊل

لائٽ باڪسز، يوزر نوٽيفڪيشنز، يا مڪمل طور تي حسب ضرورت مواد لاءِ پنھنجي سائيٽ تي ڊائلاگ شامل ڪرڻ لاءِ بوٽ اسٽريپ جو 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">
  <div class="modal-dialog">
    <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" 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="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="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-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="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">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-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" 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="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" aria-labelledby="..." aria-hidden="true">
  ...
</div>

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

جيڪڏهن موڊل جي اوچائي تبديل ٿئي ٿي جڏهن اهو کليل آهي، توهان کي فون $('#myModal').modal('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-openڪري <body>ٿو ڊفالٽ اسڪرولنگ رويي کي اوور رائڊ ڪرڻ لاءِ ۽ ٺاهي ٿو .modal-backdropهڪ ڪلڪ ايريا مهيا ڪرڻ لاءِ ڏيکاريل ماڊل کي رد ڪرڻ لاءِ جڏهن ماڊل کان ٻاهر ڪلڪ ڪيو وڃي.

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

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

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

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

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

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

اختيارن

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

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

طريقا

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

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

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

.modal(options)

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

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

.modal('toggle')

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

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

.modal('show')

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

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

.modal('hide')

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

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

.modal('handleUpdate')

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

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

.modal('dispose')

هڪ عنصر جي ماڊل کي تباهه ڪري ٿو.

واقعا

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

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