ماڊل
لائٽ باڪسز، يوزر نوٽيفڪيشنز، يا مڪمل طور تي حسب ضرورت مواد لاءِ پنھنجي سائيٽ تي ڊائلاگ شامل ڪرڻ لاءِ بوٽ اسٽريپ جو 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">×</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">×</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">×</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">×</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-describedby
on سان .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>
جاوا اسڪرپٽ ذريعي
myModal
JavaScript جي ھڪڙي لائن سان id سان ھڪڙو ماڊل ڪال ڪريو :
$('#myModal').modal(options)
اختيارن
اختيارن کي ڊيٽا جي خاصيتن يا جاوا اسڪرپٽ ذريعي منظور ڪري سگھجي ٿو. ڊيٽا جي خاصيتن لاء، اختيار جو نالو شامل ڪريو data-
، جيئن data-backdrop=""
.
نالو | قسم | ڊفالٽ | وصف |
---|---|---|---|
پس منظر | boolean يا تار'static' |
سچو | هڪ ماڊل پس منظر عنصر شامل آهي. متبادل طور تي، static ھڪڙي پس منظر جي وضاحت ڪريو جيڪو ڪلڪ ڪرڻ تي موڊل کي بند نٿو ڪري. |
ڪي بورڊ | بولين | سچو | ماڊل کي بند ڪري ٿو جڏهن فرار ڪيچ کي دٻايو ويندو آهي |
ڌيان ڏيڻ | بولين | سچو | موڊل تي ڌيان ڏئي ٿو جڏهن شروعات ڪئي وئي. |
ڏيکارڻ | بولين | سچو | ماڊل ڏيکاري ٿو جڏهن شروعات ڪئي وئي. |
طريقا
هم وقت سازي طريقا ۽ منتقلي
سڀ API طريقا غير مطابقت رکندڙ آهن ۽ هڪ منتقلي شروع ڪن ٿا . اهي ڪالر ڏانهن واپس ويندا آهن جيئن ئي منتقلي شروع ٿئي ٿي پر ان کان اڳ ختم ٿي وڃي . ان کان علاوه، هڪ طريقو ڪال هڪ منتقلي جزو تي نظر انداز ڪيو ويندو .
.modal(options)
توهان جي مواد کي ماڊل طور چالو ڪري ٿو. اختياري اختيارن کي قبول ڪري ٿو object
.
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
دستي طور تي ماڊل کي ٽوگل ڪري ٿو. موڊل اصل ۾ ڏيکاريو ويو يا لڪايو ويو آهي (يعني واقعي کان اڳ يا واقع ٿيڻ کان اڳ) ڪالر ڏانهن واپسي .shown.bs.modal
hidden.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...
})