මාදිලිය
ආලෝක පෙට්ටි, පරිශීලක දැනුම්දීම්, හෝ සම්පූර්ණයෙන්ම අභිරුචි අන්තර්ගතයන් සඳහා ඔබේ වෙබ් අඩවියට සංවාද එක් කිරීමට Bootstrap හි JavaScript මාදිලි ප්ලගිනය භාවිතා කරන්න.
එය ක්රියා කරන ආකාරය
Bootstrap හි මොඩල් සංරචකය සමඟ ආරම්භ කිරීමට පෙර, අපගේ මෙනු විකල්ප මෑතකදී වෙනස් වී ඇති බැවින් පහත සඳහන් දෑ කියවීමට වග බලා ගන්න.
- මාදිලි HTML, CSS සහ JavaScript සමඟ ගොඩනගා ඇත.
<body>
ඒවා ලේඛනයේ ඇති අනෙක් සියල්ල මත ස්ථානගත කර ඇති අතර ඒ වෙනුවට මොඩල් අන්තර්ගතය අනුචලනය වන පරිදි අනුචලනය ඉවත් කරන්න . - මාදිලියේ "පසුබිම" මත ක්ලික් කිරීමෙන් මාදිලිය ස්වයංක්රීයව වසා දමයි.
- බූට්ස්ට්රැප් එක වරකට සහය දක්වන්නේ එක් මාදිලි කවුළුවකට පමණි. Nested modals දුර්වල පරිශීලක අත්දැකීම් ලෙස අප විශ්වාස කරන බැවින් ඒවාට සහය නොදක්වයි.
- Modals භාවිතා කරයි
position: fixed
, සමහර විට එහි විදැහුම්කරණය ගැන ටිකක් විශේෂිත විය හැක. හැකි සෑම විටම, වෙනත් මූලද්රව්යවලින් විය හැකි මැදිහත්වීම් වළක්වා ගැනීම සඳහා ඔබේ මාදිලියේ HTML ඉහළ මට්ටමේ ස්ථානයක තබන්න..modal
වෙනත් ස්ථාවර මූලද්රව්යයක් තුළ කැදලි තැබීමේදී ඔබට ගැටලුවලට මුහුණ දීමට සිදුවනු ඇත . - නැවත වරක්, නිසා
position: fixed
, ජංගම උපාංගවල මාදිලි භාවිතා කිරීමේදී යම් යම් අනතුරු ඇඟවීම් තිබේ. විස්තර සඳහා අපගේ බ්රවුසර ආධාරක ලේඛනය බලන්න. - HTML5 එහි අර්ථ ශාස්ත්රය නිර්වචනය කරන ආකාරය හේතුවෙන්, HTML
autofocus
ගුණාංගය Bootstrap modals වල බලපෑමක් නැත. එකම බලපෑම ලබා ගැනීම සඳහා, සමහර අභිරුචි JavaScript භාවිතා කරන්න:
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>
මෙවලම් ඉඟි සහ popovers
මෙවලම් ඉඟි සහ පොපෝවර් අවශ්ය පරිදි ආකෘති තුළ තැබිය හැකිය. මාදිලි වසා ඇති විට, ඇතුළත ඇති ඕනෑම මෙවලම් ඉඟි සහ 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>
විවිධ මාදිලියේ අන්තර්ගතය
තරමක් වෙනස් අන්තර්ගතයන් සහිත එකම මාදිලිය ක්රියාරම්භ කරන බොත්තම් පොකුරක් තිබේද? ක්ලික් කළ බොත්තම මත පදනම්ව මොඩලයේ අන්තර්ගතය වෙනස් කිරීමට event.relatedTarget
සහ HTML 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" data-bs-dismiss="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" data-bs-dismiss="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"
අපි දැනටමත් JavaScript හරහා එය එකතු කර ඇති බැවින් ඔබට එකතු කිරීමට අවශ්ය නොවන බව සලකන්න .
YouTube වීඩියෝ කාවැද්දීම
යූ ටියුබ් වීඩියෝ මාදිලිවල කාවැද්දීමට ස්වයංක්රීයව නැවත ධාවනය සහ තවත් දේ නැවැත්වීමට අමතර ජාවාස්ක්රිප්ට් බූට්ස්ට්රැප් තුළ අවශ්ය වේ. වැඩි විස්තර සඳහා මෙම ප්රයෝජනවත් Stack Overflow පෝස්ට් බලන්න .
විකල්ප ප්රමාණ
මාදිලිවලට විකල්ප ප්රමාණ තුනක් ඇත, ඒවා මත තැබීමට විකරණකාරක පන්ති හරහා ලබා ගත හැකිය .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>
JavaScript හරහා
ජාවාස්ක්රිප්ට් තනි පේළියක් සමඟ මාදිලියක් සාදන්න:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
විකල්ප
දත්ත ගුණාංග හෝ JavaScript හරහා විකල්ප ලබා දිය හැක. දත්ත උපලක්ෂණ සඳහා, විකල්ප නාමය data-bs-
, ලෙසට එකතු කරන්න data-bs-backdrop=""
.
නම | ටයිප් කරන්න | පෙරනිමිය | විස්තර |
---|---|---|---|
backdrop |
boolean හෝ string'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()
relatedTarget
එසේම, ඔබට DOM මූලද්රව්යයක් මාදිලියේ සිදුවීම් ( දේපල ලෙස) තුළ ලැබිය හැකි තර්කයක් ලෙස සම්මත කළ හැක .
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
සිදුවීම්
Bootstrap's modal class මගින් මාදිලියේ ක්රියාකාරීත්වයට සම්බන්ධ වීම සඳහා සිදුවීම් කිහිපයක් නිරාවරණය කරයි. සියලුම මාදිලියේ සිදුවීම් මාදිලියේම (එනම් හිදී <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...
})