in English

മോഡൽ

ലൈറ്റ്‌ബോക്‌സുകൾ, ഉപയോക്തൃ അറിയിപ്പുകൾ അല്ലെങ്കിൽ പൂർണ്ണമായും ഇഷ്‌ടാനുസൃത ഉള്ളടക്കം എന്നിവയ്‌ക്കായി നിങ്ങളുടെ സൈറ്റിലേക്ക് ഡയലോഗുകൾ ചേർക്കുന്നതിന് ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ JavaScript മോഡൽ പ്ലഗിൻ ഉപയോഗിക്കുക.

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ മോഡൽ ഘടകം ഉപയോഗിച്ച് ആരംഭിക്കുന്നതിന് മുമ്പ്, ഞങ്ങളുടെ മെനു ഓപ്ഷനുകൾ അടുത്തിടെ മാറിയതിനാൽ ഇനിപ്പറയുന്നവ വായിക്കുന്നത് ഉറപ്പാക്കുക.

  • HTML, CSS, JavaScript എന്നിവ ഉപയോഗിച്ചാണ് മോഡലുകൾ നിർമ്മിച്ചിരിക്കുന്നത്. അവ ഡോക്യുമെന്റിലെ മറ്റെല്ലാറ്റിനും മുകളിൽ സ്ഥാനം പിടിച്ചിരിക്കുന്നു, കൂടാതെ <body>മോഡൽ ഉള്ളടക്കം സ്ക്രോൾ ചെയ്യുന്ന തരത്തിൽ നിന്ന് സ്ക്രോൾ നീക്കം ചെയ്യുക.
  • മോഡൽ "ബാക്ക്‌ഡ്രോപ്പ്" ക്ലിക്ക് ചെയ്യുന്നത് മോഡൽ സ്വയമേവ അടയ്ക്കും.
  • ബൂട്ട്സ്ട്രാപ്പ് ഒരു സമയം ഒരു മോഡൽ വിൻഡോയെ മാത്രമേ പിന്തുണയ്ക്കൂ. നെസ്റ്റഡ് മോഡലുകൾ മോശം ഉപയോക്തൃ അനുഭവങ്ങളാണെന്ന് ഞങ്ങൾ വിശ്വസിക്കുന്നതിനാൽ പിന്തുണയ്‌ക്കുന്നില്ല.
  • മോഡലുകൾ ഉപയോഗിക്കുന്നു position: fixed, അത് ചിലപ്പോൾ അതിന്റെ റെൻഡറിംഗിനെക്കുറിച്ച് അൽപ്പം പ്രത്യേകമായേക്കാം. സാധ്യമാകുമ്പോഴെല്ലാം, മറ്റ് ഘടകങ്ങളിൽ നിന്നുള്ള സാധ്യതയുള്ള ഇടപെടൽ ഒഴിവാക്കാൻ നിങ്ങളുടെ മോഡൽ HTML ഒരു ഉയർന്ന തലത്തിൽ സ്ഥാപിക്കുക. .modalമറ്റൊരു നിശ്ചിത ഘടകത്തിനുള്ളിൽ കൂടുകൂട്ടുമ്പോൾ നിങ്ങൾക്ക് പ്രശ്‌നങ്ങൾ നേരിടേണ്ടി വന്നേക്കാം .
  • ഒരിക്കൽ കൂടി, കാരണം position: fixed, മൊബൈൽ ഉപകരണങ്ങളിൽ മോഡലുകൾ ഉപയോഗിക്കുന്നതിന് ചില മുന്നറിയിപ്പുകൾ ഉണ്ട്. വിശദാംശങ്ങൾക്ക് ഞങ്ങളുടെ ബ്രൗസർ പിന്തുണ ഡോക്‌സ് കാണുക.
  • HTML5 അതിന്റെ അർത്ഥശാസ്‌ത്രത്തെ എങ്ങനെ നിർവചിക്കുന്നു എന്നതിനാൽ, ബൂട്ട്‌സ്‌ട്രാപ്പ് മോഡലുകളിൽ autofocusHTML ആട്രിബ്യൂട്ടിന് യാതൊരു സ്വാധീനവുമില്ല. ഇതേ ഇഫക്റ്റ് നേടുന്നതിന്, ചില ഇഷ്‌ടാനുസൃത 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">&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-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">&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="#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">&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">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>

വ്യത്യസ്ത മോഡൽ ഉള്ളടക്കം

അല്പം വ്യത്യസ്‌തമായ ഉള്ളടക്കങ്ങളുള്ള ഒരേ മോഡൽ ട്രിഗർ ചെയ്യുന്ന ഒരു കൂട്ടം ബട്ടണുകൾ ഉണ്ടോ? ഏത് ബട്ടണാണ് ക്ലിക്ക് ചെയ്തത് എന്നതിനെ ആശ്രയിച്ച് മോഡൽ ഉള്ളടക്കം മാറ്റാൻ HTML ആട്രിബ്യൂട്ടുകളും (ഒരുപക്ഷേ jQuery വഴി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">&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)
})

ആനിമേഷൻ മാറ്റുക

മോഡൽ ഫേഡ്-ഇൻ ആനിമേഷന് മുമ്പുള്ള $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"ജാവാസ്ക്രിപ്റ്റ് വഴി ഞങ്ങൾ ഇതിനകം ചേർത്തതിനാൽ നിങ്ങൾ ചേർക്കേണ്ടതില്ല എന്നത് ശ്രദ്ധിക്കുക .

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 വഴി

myModalJavaScript-ന്റെ ഒരൊറ്റ വരി ഉപയോഗിച്ച് ഐഡി ഉപയോഗിച്ച് ഒരു മോഡൽ വിളിക്കുക :

$('#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.മോഡൽ മോഡൽ ഉപയോക്താവിന് ദൃശ്യമാക്കുമ്പോൾ ഈ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും (സിഎസ്എസ് സംക്രമണങ്ങൾ പൂർത്തിയാകുന്നതുവരെ കാത്തിരിക്കും). ഒരു ക്ലിക്കിലൂടെ സംഭവിച്ചതാണെങ്കിൽ, ക്ലിക്കുചെയ്‌ത ഘടകം relatedTargetഇവന്റിന്റെ പ്രോപ്പർട്ടിയായി ലഭ്യമാണ്.
hide.bs.modal hideഇൻസ്‌റ്റൻസ് മെത്തേഡ് വിളിക്കുമ്പോൾ ഈ ഇവന്റ് ഉടനടി വെടിവയ്ക്കുന്നു .
മറഞ്ഞിരിക്കുന്നു.bs.മോഡൽ മോഡൽ ഉപയോക്താവിൽ നിന്ന് മറച്ചത് പൂർത്തിയാകുമ്പോൾ ഈ ഇവന്റ് പ്രവർത്തനക്ഷമമാകും (സിഎസ്എസ് സംക്രമണങ്ങൾ പൂർത്തിയാകുന്നതുവരെ കാത്തിരിക്കും).
hidePrevented.bs.modal മോഡൽ കാണിക്കുമ്പോൾ ഈ ഇവന്റ് ഫയർ ചെയ്യപ്പെടുന്നു, അതിന്റെ ബാക്ക്‌ഡ്രോപ്പ് staticമോഡലിന് പുറത്ത് ഒരു ക്ലിക്ക് ചെയ്യുക അല്ലെങ്കിൽ കീബോർഡ് ഓപ്‌ഷൻ ഉപയോഗിച്ച് ഒരു എസ്‌കേപ്പ് കീ അമർത്തുക അല്ലെങ്കിൽ data-keyboardലേക്ക് സജ്ജമാക്കുക false. 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})