મોડલ
લાઇટબૉક્સ, વપરાશકર્તા સૂચનાઓ અથવા સંપૂર્ણપણે કસ્ટમ સામગ્રી માટે તમારી સાઇટ પર સંવાદો ઉમેરવા માટે બુટસ્ટ્રેપના JavaScript મોડલ પ્લગઇનનો ઉપયોગ કરો.
તે કેવી રીતે કામ કરે છે
બુટસ્ટ્રેપના મોડલ ઘટક સાથે પ્રારંભ કરતા પહેલા, નીચેનાને વાંચવાની ખાતરી કરો કારણ કે અમારા મેનુ વિકલ્પો તાજેતરમાં બદલાયા છે.
- મોડલ્સ HTML, CSS અને JavaScript સાથે બનેલ છે. તેઓ દસ્તાવેજમાંની દરેક વસ્તુ પર સ્થિત છે અને
<body>
તેના બદલે મોડલ સામગ્રી સ્ક્રોલ કરવા માટે તેમાંથી સ્ક્રોલ દૂર કરે છે. - મોડલ "બેકડ્રોપ" પર ક્લિક કરવાથી મોડલ આપમેળે બંધ થઈ જશે.
- બુટસ્ટ્રેપ એક સમયે માત્ર એક મોડલ વિન્ડોને સપોર્ટ કરે છે. નેસ્ટેડ મોડલ્સ સમર્થિત નથી કારણ કે અમે માનીએ છીએ કે તે નબળા વપરાશકર્તા અનુભવો છે.
- મોડલ્સનો ઉપયોગ કરે
position: fixed
છે, જે કેટલીકવાર તેના રેન્ડરિંગ વિશે થોડી વિશિષ્ટ હોઈ શકે છે. જ્યારે પણ શક્ય હોય, ત્યારે અન્ય તત્વોના સંભવિત દખલને ટાળવા માટે તમારા મોડલ HTML ને ઉચ્ચ-સ્તરની સ્થિતિમાં મૂકો..modal
અન્ય નિશ્ચિત તત્વની અંદર એક નેસ્ટ કરતી વખતે તમને સંભવતઃ સમસ્યાઓનો સામનો કરવો પડશે . - ફરી એક વાર, ના કારણે
position: fixed
, મોબાઇલ ઉપકરણો પર મોડલનો ઉપયોગ કરવા માટે કેટલીક ચેતવણીઓ છે. વિગતો માટે અમારા બ્રાઉઝર સપોર્ટ દસ્તાવેજો જુઓ . - HTML5 તેના અર્થશાસ્ત્રને કેવી રીતે વ્યાખ્યાયિત કરે છે તેના કારણે, બુટસ્ટ્રેપ મોડલમાં
autofocus
HTML વિશેષતાની કોઈ અસર થતી નથી. સમાન અસર પ્રાપ્ત કરવા માટે, કેટલીક કસ્ટમ JavaScript નો ઉપયોગ કરો:
$('#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>
ટૂલટિપ્સ અને પોપોવર્સ
ટૂલટિપ્સ અને પોપોવર્સ જરૂર મુજબ મોડલમાં મૂકી શકાય છે. જ્યારે મોડલ્સ બંધ થાય છે, ત્યારે અંદરની કોઈપણ ટૂલટિપ્સ અને પોપોવર્સ પણ આપમેળે કાઢી નાખવામાં આવે છે.
<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>
વિવિધ મોડલ સામગ્રી
થોડી અલગ સામગ્રી સાથે સમાન મોડલને ટ્રિગર કરતા બટનોનો સમૂહ છે? કયા બટન પર ક્લિક કરવામાં આવ્યું હતું તેના આધારે મોડલની સામગ્રીમાં ફેરફાર કરવા માટે (સંભવતઃ jQuery દ્વારા ) HTML લક્ષણોનો ઉપયોગ 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"
કારણ કે અમે તેને 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>
ઉપયોગ
મોડલ પ્લગઇન ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા માંગ પર તમારી છુપાયેલી સામગ્રીને ટૉગલ કરે છે. તે ડિફૉલ્ટ સ્ક્રોલિંગ વર્તણૂકને ઓવરરાઇડ .modal-open
કરવા માટે પણ ઉમેરે છે અને મોડલની બહાર ક્લિક કરતી વખતે બતાવેલ મોડલ્સને કાઢી નાખવા માટે ક્લિક વિસ્તાર પ્રદાન કરવા માટે જનરેટ કરે છે.<body>
.modal-backdrop
ડેટા લક્ષણો દ્વારા
JavaScript લખ્યા વિના મોડલ સક્રિય કરો. કંટ્રોલર એલિમેન્ટ પર સેટ કરો data-toggle="modal"
, જેમ કે બટન, સાથે data-target="#foo"
અથવા href="#foo"
ટૉગલ કરવા માટે ચોક્કસ મોડલને લક્ષ્ય બનાવવા માટે.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
JavaScript દ્વારા
myModal
JavaScript ની એક લીટી સાથે id સાથે મોડલને કૉલ કરો :
$('#myModal').modal(options)
વિકલ્પો
વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને 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...
})