موډل
د بوټسټریپ جاواسکریپټ ماډل پلگ ان وکاروئ ترڅو خپل سایټ ته د لایټ بکسونو ، کارونکي خبرتیاو ، یا په بشپړ ډول دودیز مینځپانګې لپاره ډیالوګونه اضافه کړئ.
څنګه کار کوي
مخکې لدې چې د بوټسټریپ موډل برخې سره پیل وکړئ ، ډاډ ترلاسه کړئ چې لاندې ولولئ ځکه چې زموږ د مینو اختیارونه پدې وروستیو کې بدل شوي.
- موډلونه د HTML، CSS، او JavaScript سره جوړ شوي دي. دوی په سند کې د هرڅه په پرتله موقعیت لري او له دې څخه سکرول لرې کوي
<body>
ترڅو د ماډل مینځپانګې سکرول پرځای وي. - په موډل "بیاکډراپ" کلیک کول به په اوتومات ډول موډل بند کړي.
- بوټسټریپ یوازې په یو وخت کې د یوې موډل کړکۍ ملاتړ کوي. نیسټ شوي ماډلونه نه ملاتړ کیږي ځکه چې موږ باور لرو چې دا د کارونکي ضعیف تجربې دي.
- موډلونه کاروي
position: fixed
، کوم چې ځینې وختونه د هغې د وړاندې کولو په اړه یو څه ځانګړي کیدی شي. هرکله چې امکان ولري، خپل ماډل HTML په لوړ پوړ کې ځای په ځای کړئ ترڅو د نورو عناصرو احتمالي مداخلې څخه مخنیوی وشي. تاسو به احتمال له ستونزو سره مخ شئ کله چې.modal
د بل ثابت عنصر دننه ځړول وکړئ. - یوځل بیا ، له امله
position: fixed
، په ګرځنده وسیلو کې د ماډلونو کارولو سره ځینې احتیاطونه شتون لري. د جزیاتو لپاره زموږ د براوزر ملاتړ سندونه وګورئ. - د دې له امله چې څنګه HTML5 خپل سیمانټیکونه تعریفوي، د
autofocus
HTML ځانګړتیا د بوټسټراپ ماډلونو کې هیڅ اغیزه نلري. د ورته تاثیر ترلاسه کولو لپاره ، ځینې دودیز جاواسکریپټ وکاروئ:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
prefers-reduced-motion
رسنیو په پوښتنو پورې اړه لري. زموږ د لاسرسي اسنادو کم شوي حرکت برخه وګورئ
.
د ډیمو او کارولو لارښودونو لوستلو ته دوام ورکړئ.
مثالونه
موډل اجزا
لاندې د جامد ماډل بیلګه ده (د دې معنی لري 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>
وسیلې او پاپورونه
Tooltips او popovers د اړتیا سره سم په موډلونو کې کیښودل کیدی شي. کله چې موډلونه وتړل شي، هر ډول وسیلې او پاپورونه په اوتومات ډول له مینځه وړل کیږي.
<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>
متفاوت موډل منځپانګه
د بټونو یوه ډله لرئ چې ټول ورته ماډل د یو څه مختلف مینځپانګو سره رامینځته کوي؟ د موډل مینځپانګې توپیر کولو لپاره د HTML ځانګړتیاوې وکاروئ (احتمالا د jQuery له لارې) د دې پورې اړه لري event.relatedTarget
چې کوم data-*
تڼۍ کلیک شوې .
لاندې یو ژوندی ډیمو دی چې د مثال په توګه 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
برسیره پردې، تاسو کولی شئ د خپل موډل ډیالوګ په اړه توضیحات ورکړئ .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
د جاواسکریپټ د یوې کرښې سره د ID سره موډل ته زنګ ووهئ :
$('#myModal').modal(options)
اختیارونه
اختیارونه د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې لیږدول کیدی شي. د ډیټا ځانګړتیاو لپاره، د اختیار نوم سره ضمیمه کړئ data-
، لکه څنګه چې په کې data-backdrop=""
.
نوم | ډول | ډیفالټ | تفصیل |
---|---|---|---|
پس منظر | بولین یا تار'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 | دا پیښه له مینځه وړل کیږي کله چې موډل کارونکي ته ښکاره شي (د CSS لیږد بشپړیدو ته به انتظار وکړي). که د کلیک له امله وي، کلیک شوی عنصر relatedTarget د پیښې ملکیت په توګه شتون لري. |
hide.bs.modal | دا پیښه سمدلاسه له مینځه وړل کیږي کله چې د hide مثال میتود ویل کیږي. |
hidden.bs.modal | دا پیښه له مینځه وړل کیږي کله چې موډل د کارونکي څخه پټ شوی وي (د CSS لیږد بشپړیدو ته به انتظار وکړي). |
hidePrevented.bs.modal | دا پیښه هغه وخت ډزې کیږي کله چې موډل ښودل کیږي، د هغې شالید دی static او د موډل څخه بهر یو کلیک یا د فرار کیلي پریس د کیبورډ اختیار سره ترسره کیږي یا data-keyboard ته ټاکل کیږي false . |
$('#myModal').on('hidden.bs.modal', function (event) {
// do something...
})