Source

મોડલ

લાઇટબૉક્સ, વપરાશકર્તા સૂચનાઓ અથવા સંપૂર્ણપણે કસ્ટમ સામગ્રી માટે તમારી સાઇટ પર સંવાદો ઉમેરવા માટે બુટસ્ટ્રેપના JavaScript મોડલ પ્લગઇનનો ઉપયોગ કરો.

તે કેવી રીતે કામ કરે છે

બુટસ્ટ્રેપના મોડલ ઘટક સાથે પ્રારંભ કરતા પહેલા, નીચેનાને વાંચવાની ખાતરી કરો કારણ કે અમારા મેનુ વિકલ્પો તાજેતરમાં બદલાયા છે.

મોડલ્સ HTML, CSS અને JavaScript સાથે બનેલ છે. તેઓ દસ્તાવેજમાંની દરેક વસ્તુ પર સ્થિત છે અને <body>તેના બદલે મોડલ સામગ્રી સ્ક્રોલ કરવા માટે તેમાંથી સ્ક્રોલ દૂર કરે છે.
મોડલ "બેકડ્રોપ" પર ક્લિક કરવાથી મોડલ આપમેળે બંધ થઈ જશે.
બુટસ્ટ્રેપ એક સમયે માત્ર એક મોડલ વિન્ડોને સપોર્ટ કરે છે. નેસ્ટેડ મોડલ્સ સમર્થિત નથી કારણ કે અમે માનીએ છીએ કે તે નબળા વપરાશકર્તા અનુભવો છે.
મોડલ્સનો ઉપયોગ કરે position: fixedછે, જે કેટલીકવાર તેના રેન્ડરિંગ વિશે થોડી વિશિષ્ટ હોઈ શકે છે. જ્યારે પણ શક્ય હોય ત્યારે, અન્ય ઘટકોના સંભવિત દખલને ટાળવા માટે તમારા મોડલ HTML ને ટોચના સ્તરની સ્થિતિમાં મૂકો. .modalઅન્ય નિશ્ચિત તત્વની અંદર એક નેસ્ટ કરતી વખતે તમને સંભવતઃ સમસ્યાઓનો સામનો કરવો પડશે .
ફરી એક વાર, ના કારણે position: fixed, મોબાઇલ ઉપકરણો પર મોડલનો ઉપયોગ કરવા માટે કેટલીક ચેતવણીઓ છે. વિગતો માટે અમારા બ્રાઉઝર સપોર્ટ દસ્તાવેજો જુઓ .
HTML5 તેના અર્થશાસ્ત્રને કેવી રીતે વ્યાખ્યાયિત કરે છે તેના કારણે, બુટસ્ટ્રેપ મોડલમાં autofocusHTML વિશેષતાની કોઈ અસર થતી નથી. સમાન અસર પ્રાપ્ત કરવા માટે, કેટલીક કસ્ટમ JavaScript નો ઉપયોગ કરો:

$('#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">&times;</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>

લાઈવ ડેમો

નીચેના બટન પર ક્લિક કરીને વર્કિંગ મોડલ ડેમોને ટૉગલ કરો. તે પૃષ્ઠની ટોચ પરથી નીચે સ્લાઇડ થશે અને ઝાંખું થઈ જશે.

<!-- 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">&times;</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="#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">&times;</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

<!-- 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">&times;</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>

ટૂલટિપ્સ અને પોપોવર્સ

ટૂલટિપ્સ અને પોપોવર્સ જરૂર મુજબ મોડલમાં મૂકી શકાય છે. જ્યારે મોડલ્સ બંધ થાય છે, ત્યારે અંદરની કોઈપણ ટૂલટિપ્સ અને પોપોવર્સ પણ આપમેળે કાઢી નાખવામાં આવે છે.

<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" 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">&times;</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="...".modalrole="document".modal-dialogaria-describedby.modal

YouTube વિડિઓઝ એમ્બેડ કરવું

મોડલમાં YouTube વિડિઓઝને એમ્બેડ કરવા માટે પ્લેબેક અને વધુને આપમેળે બંધ કરવા માટે વધારાની JavaScript જરૂરી છે જે બુટસ્ટ્રેપમાં નથી. વધુ માહિતી માટે આ મદદરૂપ સ્ટેક ઓવરફ્લો પોસ્ટ જુઓ .

વૈકલ્પિક માપો

મોડલ્સમાં બે વૈકલ્પિક કદ હોય છે, જે મોડિફાયર વર્ગો દ્વારા ઉપલબ્ધ છે .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>

ઉપયોગ

મોડલ પ્લગઇન ડેટા વિશેષતાઓ અથવા 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 દ્વારા

myModalJavaScript ની એક લીટી સાથે id સાથે મોડલને કૉલ કરો :

$('#myModal').modal(options)

વિકલ્પો

વિકલ્પો ડેટા વિશેષતાઓ અથવા JavaScript દ્વારા પસાર કરી શકાય છે. ડેટા એટ્રિબ્યુટ્સ માટે, વિકલ્પ નામને data-, જેમ કે માં ઉમેરો data-backdrop="".

નામ	પ્રકાર	ડિફૉલ્ટ	વર્ણન
પૃષ્ઠભૂમિ	બુલિયન અથવા શબ્દમાળા`'static'`	સાચું	મોડલ-બેકડ્રોપ ઘટકનો સમાવેશ થાય છે. વૈકલ્પિક રીતે, `static`બેકડ્રોપ માટે સ્પષ્ટ કરો કે જે ક્લિક પર મોડલ બંધ કરતું નથી.
કીબોર્ડ	બુલિયન	સાચું	જ્યારે એસ્કેપ કી દબાવવામાં આવે ત્યારે મોડલ બંધ કરે છે
ફોકસ	બુલિયન	સાચું	જ્યારે પ્રારંભ કરવામાં આવે ત્યારે મોડલ પર ધ્યાન કેન્દ્રિત કરે છે.
બતાવો	બુલિયન	સાચું	જ્યારે પ્રારંભ થાય ત્યારે મોડલ બતાવે છે.

પદ્ધતિઓ

અસુમેળ પદ્ધતિઓ અને સંક્રમણો

બધી API પદ્ધતિઓ અસુમેળ છે અને સંક્રમણ શરૂ કરે છે . સંક્રમણ શરૂ થતાંની સાથે જ તેઓ કૉલર પાસે પાછા ફરે છે પરંતુ તે સમાપ્ત થાય તે પહેલાં . વધુમાં, સંક્રમણ ઘટક પર પદ્ધતિ કૉલ અવગણવામાં આવશે .

વધુ માહિતી માટે અમારા JavaScript દસ્તાવેજીકરણ જુઓ.

`.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 સંક્રમણો પૂર્ણ થવાની રાહ જોશે).

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})