Sourceموډل
د بوټسټریپ جاواسکریپټ ماډل پلگ ان وکاروئ ترڅو خپل سایټ ته د لایټ بکسونو ، کارونکي خبرتیاو ، یا په بشپړ ډول دودیز مینځپانګې لپاره ډیالوګونه اضافه کړئ.
مخکې لدې چې د بوټسټریپ موډل برخې سره پیل وکړئ ، ډاډ ترلاسه کړئ چې لاندې ولولئ ځکه چې زموږ د مینو اختیارونه پدې وروستیو کې بدل شوي.
موډلونه د HTML، CSS، او JavaScript سره جوړ شوي دي. دوی په سند کې د هرڅه په پرتله موقعیت لري او له دې څخه سکرول لرې کوي <body>
ترڅو د ماډل مینځپانګې سکرول پرځای وي.
په موډل "بیاکډراپ" کلیک کول به په اوتومات ډول موډل بند کړي.
بوټسټریپ یوازې په یو وخت کې د یوې موډل کړکۍ ملاتړ کوي. نیسټ شوي ماډلونه نه ملاتړ کیږي ځکه چې موږ باور لرو چې دا د کارونکي ضعیف تجربې دي.
موډلونه کاروي position: fixed
، کوم چې ځینې وختونه د هغې د وړاندې کولو په اړه یو څه ځانګړي کیدی شي. هرکله چې امکان ولري، خپل ماډل HTML په لوړ پوړ کې ځای په ځای کړئ ترڅو د نورو عناصرو احتمالي مداخلې څخه مخنیوی وشي. تاسو به احتمال له ستونزو سره مخ شئ کله چې .modal
د بل ثابت عنصر دننه ځړول وکړئ.
یوځل بیا ، له امله position: fixed
، په ګرځنده وسیلو کې د ماډلونو کارولو سره ځینې احتیاطونه شتون لري. د جزیاتو لپاره زموږ د براوزر ملاتړ سندونه وګورئ.
د دې له امله چې څنګه HTML5 خپل سیمانټیکونه تعریفوي، د autofocus
HTML ځانګړتیا د بوټسټراپ ماډلونو کې هیڅ اغیزه نلري. د ورته تاثیر ترلاسه کولو لپاره ، ځینې دودیز جاواسکریپټ وکاروئ:
کاپي
$ ( '#myModal' ). on ( 'shown.bs.modal' , function () {
$ ( '#myInput' ). trigger ( 'focus' )
})
د ډیمو او کارولو لارښودونو لوستلو ته دوام ورکړئ.
لاندې د جامد ماډل بیلګه ده (د دې معنی لري 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" > × </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-primary" > Save changes</button>
<button type= "button" class= "btn btn-secondary" data-dismiss= "modal" > Close</button>
</div>
</div>
</div>
</div>
د لاندې تڼۍ په کلیک کولو سره د کاري موډل ډیمو بدل کړئ. دا به د پاڼې له پورتنۍ برخې څخه ښکته او تیاره شي.
Woohoo, you're reading this text in a modal!
د ډیمو ماډل پیل کړئ
کاپي
<!-- 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" > × </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>
کله چې موډلونه د کاروونکي لید یا وسیلې لپاره خورا اوږد شي، دوی پخپله د پاڼې څخه خپلواک سکرول کوي. لاندې ډیمو هڅه وکړئ ترڅو وګورئ چې موږ څه معنی لرو.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
د ډیمو ماډل پیل کړئ
کاپي
<!-- 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" > × </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
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
د ډیمو ماډل پیل کړئ
کاپي
<!-- 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= "exampleModalLongTitle" > 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>
Tooltips او popovers د اړتیا سره سم په موډلونو کې کیښودل کیدی شي. کله چې موډلونه وتړل شي، هر ډول وسیلې او پاپورونه په اوتومات ډول له مینځه وړل کیږي.
Popover in a modal
This button triggers a popover on click.
Tooltips in a modal
This link and that link have tooltips on hover.
د ډیمو ماډل پیل کړئ
کاپي
<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
. بیا، د نورمال گرډ سیسټم ټولګي وکاروئ لکه څنګه چې تاسو بل چیرې.
.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-auto
.col-md-2 .ml-auto
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
د ډیمو ماډل پیل کړئ
کاپي
<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
.
د @mdo لپاره موډل خلاص کړئ
د @fat لپاره موډل خلاص کړئ
د @getbootstrap لپاره موډل خلاص کړئ
کاپي
<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" > × </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-describedby
برسیره پردې، تاسو کولی شئ د خپل موډل ډیالوګ په اړه توضیحات ورکړئ .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=""
.
نوم
ډول
ډیفالټ
تفصیل
پس منظر
بولین یا تار'static'
ریښتیا
د ماډل شالید عنصر شامل دی. په بدیل سره، static
د شالید لپاره مشخص کړئ کوم چې په کلیک کولو موډل بند نه کوي.
کیبورډ
بولین
ریښتیا
موډل بندوي کله چې د فرار کیلي فشار راوړي
تمرکز
بولین
ریښتیا
کله چې پیل شي په موډل تمرکز وکړئ.
ښودل
بولین
ریښتیا
موډل ښیې کله چې پیل شي.
غیر متناسب میتودونه او لیږدونه
د API ټولې طریقې غیر متناسب دي او لیږد پیل کوي . کله چې لیږد پیل شي دوی بیرته زنګ وهونکي ته راستانه کیږي مګر مخکې له دې چې پای ته ورسیږي . برسېره پردې، د لیږدونکي برخې په اړه د میتود غوښتنې به له پامه غورځول شي .
د نورو معلوماتو لپاره زموږ جاواسکریپټ اسناد وګورئ.
ستاسو مینځپانګه د ماډل په توګه فعالوي. یو اختیاري اختیارونه مني object
.
کاپي
$ ( '#myModal' ). modal ({
keyboard : false
})
په لاسي ډول موډل بدلوي. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې موډل واقعیا ښودل شوی یا پټ شوی وي (د بیلګې په توګه مخکې لدې shown.bs.modal
یا hidden.bs.modal
پیښه پیښ شي).
کاپي
$ ( '#myModal' ). modal ( 'toggle' )
په لاسي ډول موډل خلاصوي. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې ماډل واقعیا وښودل شي (یعنې مخکې له دې چې shown.bs.modal
پیښه پیښ شي).
کاپي
$ ( '#myModal' ). modal ( 'show' )
په لاسي ډول یو موډل پټوي. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې موډل واقعیا پټ شوی وي (یعنې مخکې له دې چې hidden.bs.modal
پیښه پیښ شي).
کاپي
$ ( '#myModal' ). modal ( 'hide' )
په لاسي ډول د موډل موقعیت تنظیم کړئ که چیرې د موډل لوړوالی د خلاصیدو پرمهال بدل شي (د مثال په توګه په هغه حالت کې چې سکرول بار څرګندیږي).
کاپي
$ ( '#myModal' ). modal ( 'handleUpdate' )
د عنصر ماډل ویجاړوي.
د بوټسټریپ موډل کلاس د موډل فعالیت کې د ځړولو لپاره یو څو پیښې افشا کوي. ټول موډل پیښې پخپله موډل کې ویشل شوي (یعنې په <div class="modal">
).
د پیښې ډول
تفصیل
show.bs.modal
دا پیښه سمدلاسه اوریږي کله چې د show
مثال میتود ویل کیږي. که د کلیک له امله رامینځته شي، کلیک شوی عنصر relatedTarget
د پیښې ملکیت په توګه شتون لري.
ښودل شوی.bs.modal
دا پیښه له مینځه وړل کیږي کله چې موډل کارونکي ته ښکاره شي (د CSS لیږد بشپړیدو ته به انتظار وکړي). که د کلیک له امله رامینځته شي، کلیک شوی عنصر relatedTarget
د پیښې ملکیت په توګه شتون لري.
hide.bs.modal
دا پیښه سمدلاسه له مینځه وړل کیږي کله چې د hide
مثال میتود ویل کیږي.
hidden.bs.modal
دا پیښه له مینځه وړل کیږي کله چې موډل د کارونکي څخه پټ شوی وي (د CSS لیږد بشپړیدو ته به انتظار وکړي).
کاپي
$ ( '#myModal' ). on ( 'hidden.bs.modal' , function ( e ) {
// do something...
})