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')
})

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)
})

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

ماڊلز لاءِ جيڪي ڏسڻ لاءِ منجهيل ٿيڻ بجاءِ ظاهر ٿين ٿا، .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. اهي سائيز ڪجهه وقفي پوائنٽن تي داخل ٿين ٿا ته جيئن تنگ ڏيک واري بندرگاهن تي افقي اسڪرول بار کان بچڻ لاءِ.

<!-- 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 طريقا غير مطابقت رکندڙ آهن ۽ هڪ منتقلي شروع ڪن ٿا . اهي ڪالر ڏانهن موٽندا آهن جيئن ئي منتقلي شروع ٿئي ٿي پر ان کان اڳ ختم ٿي وڃي . ان کان علاوه، هڪ طريقو ڪال هڪ منتقلي جزو تي نظر انداز ڪيو ويندو .

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

.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 اهو واقعو فائر ڪيو ويندو آهي جڏهن ماڊل ختم ٿي چڪو آهي صارف کان لڪيل آهي (سي ايس ايس جي منتقلي مڪمل ٿيڻ جو انتظار ڪندو).
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})