મોડલ
લાઇટબૉક્સ, વપરાશકર્તા સૂચનાઓ અથવા સંપૂર્ણપણે કસ્ટમ સામગ્રી માટે તમારી સાઇટ પર સંવાદો ઉમેરવા માટે બુટસ્ટ્રેપના JavaScript મોડલ પ્લગઇનનો ઉપયોગ કરો.
તે કેવી રીતે કામ કરે છે
બુટસ્ટ્રેપના મોડલ ઘટક સાથે પ્રારંભ કરતા પહેલા, નીચેનાને વાંચવાની ખાતરી કરો કારણ કે અમારા મેનુ વિકલ્પો તાજેતરમાં બદલાયા છે.
- મોડલ્સ HTML, CSS અને JavaScript સાથે બનેલ છે. તેઓ દસ્તાવેજમાંની દરેક વસ્તુ પર સ્થિત છે અને
<body>
તેના બદલે મોડલ સામગ્રી સ્ક્રોલ કરવા માટે તેમાંથી સ્ક્રોલ દૂર કરે છે. - મોડલ "બેકડ્રોપ" પર ક્લિક કરવાથી મોડલ આપમેળે બંધ થઈ જશે.
- બુટસ્ટ્રેપ એક સમયે માત્ર એક મોડલ વિન્ડોને સપોર્ટ કરે છે. નેસ્ટેડ મોડલ્સ સમર્થિત નથી કારણ કે અમે માનીએ છીએ કે તે નબળા વપરાશકર્તા અનુભવો છે.
- મોડલ્સનો ઉપયોગ કરે
position: fixed
છે, જે કેટલીકવાર તેના રેન્ડરિંગ વિશે થોડી વિશિષ્ટ હોઈ શકે છે. જ્યારે પણ શક્ય હોય, ત્યારે અન્ય તત્વોના સંભવિત દખલને ટાળવા માટે તમારા મોડલ HTML ને ઉચ્ચ-સ્તરની સ્થિતિમાં મૂકો..modal
અન્ય નિશ્ચિત તત્વની અંદર એક નેસ્ટ કરતી વખતે તમને સંભવતઃ સમસ્યાઓનો સામનો કરવો પડશે . - ફરી એક વાર, ના કારણે
position: fixed
, મોબાઇલ ઉપકરણો પર મોડલનો ઉપયોગ કરવા માટે કેટલીક ચેતવણીઓ છે. વિગતો માટે અમારા બ્રાઉઝર સપોર્ટ દસ્તાવેજો જુઓ . - HTML5 તેના અર્થશાસ્ત્રને કેવી રીતે વ્યાખ્યાયિત કરે છે તેના કારણે, બુટસ્ટ્રેપ મોડલમાં
autofocus
HTML વિશેષતાની કોઈ અસર થતી નથી. સમાન અસર પ્રાપ્ત કરવા માટે, કેટલીક કસ્ટમ 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>
ટૂલટિપ્સ અને પોપોવર્સ
ટૂલટિપ્સ અને પોપોવર્સ જરૂર મુજબ મોડલમાં મૂકી શકાય છે. જ્યારે મોડલ્સ બંધ થાય છે, ત્યારે અંદરની કોઈપણ ટૂલટિપ્સ અને પોપોવર્સ પણ આપમેળે કાઢી નાખવામાં આવે છે.
<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"
કારણ કે અમે તેને JavaScript દ્વારા પહેલેથી જ ઉમેરીએ છીએ.
YouTube વિડિઓઝ એમ્બેડ કરવું
મોડલમાં YouTube વિડિઓઝને એમ્બેડ કરવા માટે પ્લેબેક અને વધુને આપમેળે બંધ કરવા માટે વધારાની JavaScript જરૂરી છે જે બુટસ્ટ્રેપમાં નથી. વધુ માહિતી માટે આ મદદરૂપ સ્ટેક ઓવરફ્લો પોસ્ટ જુઓ .
વૈકલ્પિક માપો
મોડલ્સમાં ત્રણ વૈકલ્પિક કદ હોય છે, જે એક પર મૂકવા માટે સંશોધક વર્ગો દ્વારા ઉપલબ્ધ છે .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);
}
}
}
}
ઉપયોગ
મોડલ પ્લગઇન ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા માંગ પર તમારી છુપાયેલી સામગ્રીને ટૉગલ કરે છે. તે ડિફૉલ્ટ સ્ક્રોલિંગ વર્તણૂકને પણ ઓવરરાઇડ કરે છે અને .modal-backdrop
મોડલની બહાર ક્લિક કરતી વખતે બતાવેલ મોડલ્સને કાઢી નાખવા માટે ક્લિક વિસ્તાર પ્રદાન કરવા માટે જનરેટ કરે છે.
ડેટા લક્ષણો દ્વારા
ટૉગલ કરો
JavaScript લખ્યા વિના મોડલ સક્રિય કરો. કંટ્રોલર એલિમેન્ટ પર સેટ કરો 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>
JavaScript દ્વારા
જાવાસ્ક્રિપ્ટની એક લાઇન સાથે મોડલ બનાવો:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
વિકલ્પો
વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને 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...
})