موډل
د بوټسټریپ جاواسکریپټ ماډل پلگ ان وکاروئ ترڅو خپل سایټ ته د لایټ بکسونو ، کارونکي خبرتیاو ، یا په بشپړ ډول دودیز مینځپانګې لپاره ډیالوګونه اضافه کړئ.
څنګه کار کوي
مخکې لدې چې د بوټسټریپ موډل برخې سره پیل وکړئ ، ډاډ ترلاسه کړئ چې لاندې ولولئ ځکه چې زموږ د مینو اختیارونه پدې وروستیو کې بدل شوي.
- موډلونه د HTML، CSS، او JavaScript سره جوړ شوي دي. دوی په سند کې د هرڅه په پرتله موقعیت لري او له دې څخه سکرول لرې کوي
<body>
ترڅو د ماډل مینځپانګې سکرول پرځای وي. - په موډل "بیاکډراپ" کلیک کول به په اوتومات ډول موډل بند کړي.
- بوټسټریپ یوازې په یو وخت کې د یوې موډل کړکۍ ملاتړ کوي. نیسټ شوي ماډلونه نه ملاتړ کیږي ځکه چې موږ باور لرو چې دا د کارونکي ضعیف تجربې دي.
- موډلونه کاروي
position: fixed
، کوم چې ځینې وختونه د هغې د وړاندې کولو په اړه یو څه ځانګړي کیدی شي. هرکله چې امکان ولري، خپل ماډل HTML په لوړ پوړ کې ځای په ځای کړئ ترڅو د نورو عناصرو احتمالي مداخلې څخه مخنیوی وشي. تاسو به احتمال له ستونزو سره مخ شئ کله چې.modal
د بل ثابت عنصر دننه ځړول وکړئ. - یوځل بیا ، له امله
position: fixed
، په ګرځنده وسیلو کې د ماډلونو کارولو سره ځینې احتیاطونه شتون لري. د جزیاتو لپاره زموږ د براوزر ملاتړ سندونه وګورئ. - د دې له امله چې څنګه HTML5 خپل سیمانټیکونه تعریفوي، د
autofocus
HTML ځانګړتیا د بوټسټراپ ماډلونو کې هیڅ اغیزه نلري. د ورته تاثیر ترلاسه کولو لپاره ، ځینې دودیز جاواسکریپټ وکاروئ:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.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="btn-close" data-bs-dismiss="modal" aria-label="Close"></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-bs-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-bs-toggle="modal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-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-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-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-bs-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 ms-auto">.col-md-4 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
<div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-6 ms-auto">.col-md-6 .ms-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 ځانګړتیاوې وکاروئ event.relatedTarget
او پدې پورې اړه لري چې کوم تڼۍ کلیک شوې.data-bs-*
لاندې یو ژوندی ډیمو دی چې د مثال په توګه HTML او JavaScript تعقیبوي. د نورو معلوماتو لپاره، په اړه د جزیاتو لپاره د موډل پیښو اسناد ولولئrelatedTarget
.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-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="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="mb-3">
<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-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
// Button that triggered the modal
var button = event.relatedTarget
// Extract info from data-bs-* attributes
var recipient = button.getAttribute('data-bs-whatever')
// If necessary, you could initiate an AJAX request here
// and then do the updating in a callback.
//
// Update the modal's content.
var modalTitle = exampleModal.querySelector('.modal-title')
var modalBodyInput = exampleModal.querySelector('.modal-body input')
modalTitle.textContent = 'New message to ' + recipient
modalBodyInput.value = recipient
})
د موډلونو تر منځ بدلول
د ډیری موډلونو تر مینځ د ځینې هوښیار ځای پرځای کولو data-bs-target
او data-bs-toggle
ځانګړتیاو سره بدل کړئ. د مثال په توګه، تاسو کولی شئ د مخکینۍ پرانیستې لاسلیک موډل څخه د پټنوم ری سیٹ موډل بدل کړئ. مهرباني وکړئ په یاد ولرئ چې ډیری ماډلونه په ورته وخت کې نشي خلاصیدلی - دا طریقه په ساده ډول د دوه جلا موډلونو ترمینځ بدلیږي.
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Show a second modal and hide this one with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Hide this modal and show the first with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
</div>
</div>
</div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>
حرکت بدل کړئ
متغیر د موډل فیډ-ان انیمیشن څخه دمخه $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.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-dialog
.
ټولګي | شتون |
---|---|
.modal-fullscreen |
تل |
.modal-fullscreen-sm-down |
لاندې576px |
.modal-fullscreen-md-down |
لاندې768px |
.modal-fullscreen-lg-down |
لاندې992px |
.modal-fullscreen-xl-down |
لاندې1200px |
.modal-fullscreen-xxl-down |
لاندې1400px |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
ساس
متغیرات
$modal-inner-padding: $spacer;
$modal-footer-margin-between: .5rem;
$modal-dialog-margin: .5rem;
$modal-dialog-margin-y-sm-up: 1.75rem;
$modal-title-line-height: $line-height-base;
$modal-content-color: null;
$modal-content-bg: $white;
$modal-content-border-color: rgba($black, .2);
$modal-content-border-width: $border-width;
$modal-content-border-radius: $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs: $box-shadow-sm;
$modal-content-box-shadow-sm-up: $box-shadow;
$modal-backdrop-bg: $black;
$modal-backdrop-opacity: .5;
$modal-header-border-color: $border-color;
$modal-footer-border-color: $modal-header-border-color;
$modal-header-border-width: $modal-content-border-width;
$modal-footer-border-width: $modal-header-border-width;
$modal-header-padding-y: $modal-inner-padding;
$modal-header-padding-x: $modal-inner-padding;
$modal-header-padding: $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility
$modal-sm: 300px;
$modal-md: 500px;
$modal-lg: 800px;
$modal-xl: 1140px;
$modal-fade-transform: translate(0, -50px);
$modal-show-transform: none;
$modal-transition: transform .3s ease-out;
$modal-scale-transform: scale(1.02);
لوپ
ځواب ورکوونکي بشپړ سکرین موډلونه د نقشې له لارې رامینځته شوي $breakpoints
او په کې لوپ scss/_modal.scss
.
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
$postfix: if($infix != "", $infix + "-down", "");
@include media-breakpoint-down($breakpoint) {
.modal-fullscreen#{$postfix} {
width: 100vw;
max-width: none;
height: 100%;
margin: 0;
.modal-content {
height: 100%;
border: 0;
@include border-radius(0);
}
.modal-header {
@include border-radius(0);
}
.modal-body {
overflow-y: auto;
}
.modal-footer {
@include border-radius(0);
}
}
}
}
کارول
موډل پلگ ان ستاسو پټ مینځپانګه د غوښتنې سره سم ، د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې بدلوي. دا د ډیفالټ سکرول کولو چلند هم پورته کوي او .modal-backdrop
د موډل څخه بهر کلیک کولو پرمهال د ښودل شوي موډلونو د لرې کولو لپاره د کلیک ساحه چمتو کولو لپاره رامینځته کوي.
د معلوماتو ځانګړتیاو له لارې
ټګ
د جاواسکریپټ لیکلو پرته موډل فعال کړئ. data-bs-toggle="modal"
د کنټرولر عنصر باندې تنظیم کړئ ، لکه د تڼۍ په څیر ، د یو سره data-bs-target="#foo"
یا href="#foo"
د توګل کولو لپاره ځانګړي ماډل په نښه کول.
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
ګوښه کول
ګوښه کول د موډل دننه پهdata
تڼۍ کې د ځانګړتیا سره ترلاسه کیدی شي لکه څنګه چې لاندې ښودل شوي:
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
یا د موډل څخه بهر په تڼۍ کې لکه څنګه چې لاندې ښودل شوي په کارولو سره data-bs-target
:
<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
د جاواسکریپټ له لارې
د جاواسکریپټ د یوې کرښې سره موډل جوړ کړئ:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
اختیارونه
اختیارونه د ډیټا ځانګړتیاو یا جاواسکریپټ له لارې لیږدول کیدی شي. د ډیټا ځانګړتیاو لپاره، د اختیار نوم سره ضمیمه کړئ data-bs-
، لکه څنګه چې په کې data-bs-backdrop=""
.
نوم | ډول | ډیفالټ | تفصیل |
---|---|---|---|
backdrop |
بولین یا تار'static' |
true |
د ماډل شالید عنصر شامل دی. په بدیل سره، static د شالید لپاره مشخص کړئ کوم چې په کلیک کولو موډل بند نه کوي. |
keyboard |
بولین | true |
موډل بندوي کله چې د فرار کیلي فشار راوړي |
focus |
بولین | true |
په موډل باندې تمرکز وکړئ کله چې پیل شي. |
میتودونه
غیر متناسب میتودونه او لیږدونه
ټولې API میتودونه غیر متزلزل دي او لیږد پیل کوي . کله چې لیږد پیل شي دوی بیرته زنګ وهونکي ته بیرته راځي مګر مخکې له دې چې پای ته ورسیږي . برسېره پردې، د لیږدونکي برخې په اړه د میتود غوښتنې به له پامه غورځول شي .
د تیریدو اختیارونه
ستاسو مینځپانګه د ماډل په توګه فعالوي. یو اختیاري اختیارونه مني object
.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
بدلول
په لاسي ډول موډل بدلوي. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې موډل واقعیا ښودل شوی یا پټ شوی وي (د بیلګې په توګه مخکې لدې shown.bs.modal
یا hidden.bs.modal
پیښه پیښ شي).
myModal.toggle()
ښودل
په لاسي ډول موډل خلاصوي. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې ماډل واقعیا وښودل شي (یعنې مخکې له دې چې shown.bs.modal
پیښه پیښ شي).
myModal.show()
همچنان ، تاسو کولی شئ د DOM عنصر د دلیل په توګه تیر کړئ چې د موډل پیښو کې ترلاسه کیدی شي (د relatedTarget
ملکیت په توګه).
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
پټول
په لاسي ډول یو موډل پټوي. زنګ وهونکي ته بیرته راستنیږي مخکې لدې چې موډل واقعیا پټ شوی وي (یعنې مخکې له دې چې hidden.bs.modal
پیښه پیښ شي).
myModal.hide()
سمبالول تازه کول
په لاسي ډول د موډل موقعیت تنظیم کړئ که چیرې د موډل لوړوالی د خلاصیدو پرمهال بدل شي (د مثال په توګه په هغه حالت کې چې سکرول بار څرګندیږي).
myModal.handleUpdate()
تصفیه کول
د عنصر ماډل ویجاړوي. (د DOM عنصر کې زیرمه شوي معلومات لرې کوي)
myModal.dispose()
getInstance
جامد میتود چې تاسو ته اجازه درکوي د DOM عنصر سره تړلي ماډل مثال ترلاسه کړئ
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
getOrCreateInstance
جامد میتود چې تاسو ته اجازه درکوي د DOM عنصر سره تړلي ماډل مثال ترلاسه کړئ ، یا یو نوی رامینځته کړئ که چیرې دا پیل نه وي
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
پیښې
د بوټسټریپ موډل کلاس د موډل فعالیت کې د ځړولو لپاره یو څو پیښې افشا کوي. ټول موډل پیښې پخپله موډل کې ویشل شوي (یعنې په <div class="modal">
).
د پیښې ډول | تفصیل |
---|---|
show.bs.modal |
دا پیښه سمدلاسه اوریږي کله چې د show مثال میتود ویل کیږي. که د کلیک له امله رامینځته شي، کلیک شوی عنصر relatedTarget د پیښې ملکیت په توګه شتون لري. |
shown.bs.modal |
دا پیښه له مینځه وړل کیږي کله چې موډل کارونکي ته ښکاره شي (د CSS لیږد بشپړیدو ته به انتظار وکړي). که د کلیک له امله رامینځته شي، کلیک شوی عنصر relatedTarget د پیښې ملکیت په توګه شتون لري. |
hide.bs.modal |
دا پیښه سمدلاسه له مینځه وړل کیږي کله چې د hide مثال میتود ویل کیږي. |
hidden.bs.modal |
دا پیښه له مینځه وړل کیږي کله چې موډل د کارونکي څخه پټ شوی وي (د CSS لیږد بشپړیدو ته به انتظار وکړي). |
hidePrevented.bs.modal |
دا پیښه هغه وخت ډزې کیږي کله چې موډل ښودل کیږي، د هغې شالید دی static او د موډل څخه بهر یو کلیک یا د فرار کیلي پریس د کیبورډ اختیار سره ترسره کیږي یا data-bs-keyboard ته ټاکل کیږي false . |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})