Source

ಮಾದರಿ

ಲೈಟ್‌ಬಾಕ್ಸ್‌ಗಳು, ಬಳಕೆದಾರರ ಅಧಿಸೂಚನೆಗಳು ಅಥವಾ ಸಂಪೂರ್ಣವಾಗಿ ಕಸ್ಟಮ್ ವಿಷಯಕ್ಕಾಗಿ ನಿಮ್ಮ ಸೈಟ್‌ಗೆ ಸಂವಾದಗಳನ್ನು ಸೇರಿಸಲು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮಾದರಿ ಪ್ಲಗಿನ್ ಬಳಸಿ.

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಮಾದರಿ ಘಟಕದೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು, ನಮ್ಮ ಮೆನು ಆಯ್ಕೆಗಳು ಇತ್ತೀಚೆಗೆ ಬದಲಾಗಿರುವುದರಿಂದ ಕೆಳಗಿನದನ್ನು ಓದಲು ಮರೆಯದಿರಿ.

  • ಮಾದರಿಗಳನ್ನು HTML, CSS ಮತ್ತು JavaScript ನೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾಗಿದೆ. ಡಾಕ್ಯುಮೆಂಟ್‌ನಲ್ಲಿರುವ ಎಲ್ಲದರ ಮೇಲೆ ಅವು ಸ್ಥಾನ ಪಡೆದಿವೆ ಮತ್ತು <body>ಮಾದರಿ ವಿಷಯ ಸ್ಕ್ರಾಲ್ ಆಗುವಂತೆ ಸ್ಕ್ರಾಲ್‌ನಿಂದ ಸ್ಕ್ರಾಲ್ ಅನ್ನು ತೆಗೆದುಹಾಕಿ.
  • ಮೋಡಲ್ "ಬ್ಯಾಕ್‌ಡ್ರಾಪ್" ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವುದರಿಂದ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮೋಡಲ್ ಅನ್ನು ಮುಚ್ಚುತ್ತದೆ.
  • ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಒಂದು ಸಮಯದಲ್ಲಿ ಒಂದು ಮಾದರಿ ವಿಂಡೋವನ್ನು ಮಾತ್ರ ಬೆಂಬಲಿಸುತ್ತದೆ. ನೆಸ್ಟೆಡ್ ಮಾಡಲ್‌ಗಳು ಕಳಪೆ ಬಳಕೆದಾರ ಅನುಭವಗಳೆಂದು ನಾವು ನಂಬಿರುವುದರಿಂದ ಅವುಗಳನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ.
  • ಮೋಡಲ್‌ಗಳು ಬಳಸುತ್ತವೆ position: fixed, ಇದು ಕೆಲವೊಮ್ಮೆ ಅದರ ರೆಂಡರಿಂಗ್ ಬಗ್ಗೆ ಸ್ವಲ್ಪ ನಿರ್ದಿಷ್ಟವಾಗಿರುತ್ತದೆ. ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ, ಇತರ ಅಂಶಗಳಿಂದ ಸಂಭಾವ್ಯ ಹಸ್ತಕ್ಷೇಪವನ್ನು ತಪ್ಪಿಸಲು ನಿಮ್ಮ ಮಾದರಿ HTML ಅನ್ನು ಉನ್ನತ ಮಟ್ಟದ ಸ್ಥಾನದಲ್ಲಿ ಇರಿಸಿ. .modalಮತ್ತೊಂದು ಸ್ಥಿರ ಅಂಶದೊಳಗೆ ಗೂಡುಕಟ್ಟಿದಾಗ ನೀವು ಸಮಸ್ಯೆಗಳಿಗೆ ಸಿಲುಕಬಹುದು .
  • ಮತ್ತೊಮ್ಮೆ, ಕಾರಣ position: fixed, ಮೊಬೈಲ್ ಸಾಧನಗಳಲ್ಲಿ ಮಾದರಿಗಳನ್ನು ಬಳಸುವುದರೊಂದಿಗೆ ಕೆಲವು ಎಚ್ಚರಿಕೆಗಳಿವೆ. ವಿವರಗಳಿಗಾಗಿ ನಮ್ಮ ಬ್ರೌಸರ್ ಬೆಂಬಲ ಡಾಕ್ಸ್ ಅನ್ನು ನೋಡಿ.
  • HTML5 ಅದರ ಶಬ್ದಾರ್ಥವನ್ನು ಹೇಗೆ ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ ಎಂಬ ಕಾರಣದಿಂದಾಗಿ , autofocusHTML ಗುಣಲಕ್ಷಣವು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಮಾದರಿಗಳಲ್ಲಿ ಯಾವುದೇ ಪರಿಣಾಮವನ್ನು ಬೀರುವುದಿಲ್ಲ. ಅದೇ ಪರಿಣಾಮವನ್ನು ಸಾಧಿಸಲು, ಕೆಲವು ಕಸ್ಟಮ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

ಈ ಘಟಕದ ಅನಿಮೇಷನ್ ಪರಿಣಾಮವು prefers-reduced-motionಮಾಧ್ಯಮದ ಪ್ರಶ್ನೆಯ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿದೆ. ನಮ್ಮ ಪ್ರವೇಶಿಸುವಿಕೆ ದಸ್ತಾವೇಜನ್ನು ಕಡಿಮೆ ಚಲನೆಯ ವಿಭಾಗವನ್ನು ನೋಡಿ .

ಡೆಮೊಗಳು ಮತ್ತು ಬಳಕೆಯ ಮಾರ್ಗಸೂಚಿಗಳಿಗಾಗಿ ಓದುವುದನ್ನು ಮುಂದುವರಿಸಿ.

ಉದಾಹರಣೆಗಳು

ಕೆಳಗೆ ಒಂದು ಸ್ಥಿರ ಮಾದರಿ ಉದಾಹರಣೆಯಾಗಿದೆ (ಅದರ ಅರ್ಥ 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-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" 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="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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>

ದೀರ್ಘ ವಿಷಯವನ್ನು ಸ್ಕ್ರೋಲ್ ಮಾಡಲಾಗುತ್ತಿದೆ

ಬಳಕೆದಾರರ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ ಅಥವಾ ಸಾಧನಕ್ಕೆ ಮಾದರಿಗಳು ತುಂಬಾ ಉದ್ದವಾದಾಗ, ಅವರು ಪುಟದಿಂದ ಸ್ವತಂತ್ರವಾಗಿ ಸ್ಕ್ರಾಲ್ ಮಾಡುತ್ತಾರೆ. ನಾವು ಏನನ್ನು ಅರ್ಥೈಸುತ್ತೇವೆ ಎಂಬುದನ್ನು ನೋಡಲು ಕೆಳಗಿನ ಡೆಮೊವನ್ನು ಪ್ರಯತ್ನಿಸಿ.

<!-- 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-scrollableಗೆ ಸೇರಿಸುವ ಮೂಲಕ ಮೋಡಲ್ ದೇಹವನ್ನು ಸ್ಕ್ರಾಲ್ ಮಾಡಲು ಅನುಮತಿಸುವ ಸ್ಕ್ರೋಲ್ ಮಾಡಬಹುದಾದ ಮೋಡಲ್ ಅನ್ನು ಸಹ ನೀವು ರಚಿಸಬಹುದು .modal-dialog.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalScrollableTitle">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="exampleModalCenterTitle">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>

ಬದಲಾಗುತ್ತಿರುವ ಮಾದರಿ ವಿಷಯ

ಸ್ವಲ್ಪ ವಿಭಿನ್ನ ವಿಷಯಗಳೊಂದಿಗೆ ಒಂದೇ ಮಾದರಿಯನ್ನು ಪ್ರಚೋದಿಸುವ ಬಟನ್‌ಗಳ ಗುಂಪನ್ನು ಹೊಂದಿರುವಿರಾ? ಬಳಸಿ event.relatedTargetಮತ್ತು HTML data-*ಗುಣಲಕ್ಷಣಗಳನ್ನು (ಬಹುಶಃ jQuery ಮೂಲಕ ) ಯಾವ ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಲಾಗಿದೆ ಎಂಬುದರ ಆಧಾರದ ಮೇಲೆ ಮೋಡಲ್‌ನ ವಿಷಯಗಳನ್ನು ಬದಲಾಯಿಸಲು.

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)
})

ಅನಿಮೇಷನ್ ಬದಲಾಯಿಸಿ

ವೇರಿಯೇಬಲ್ ಮಾಡಲ್ ಫೇಡ್-ಇನ್ ಅನಿಮೇಷನ್‌ನ ಮೊದಲು $modal-fade-transformರೂಪಾಂತರ ಸ್ಥಿತಿಯನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ, ವೇರಿಯಬಲ್ ಮೋಡಲ್ ಫೇಡ್-ಇನ್ ಅನಿಮೇಷನ್‌ನ ಕೊನೆಯಲ್ಲಿ ರೂಪಾಂತರವನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ ..modal-dialog$modal-show-transform.modal-dialog

ನೀವು ಉದಾಹರಣೆಗೆ ಜೂಮ್-ಇನ್ ಅನಿಮೇಷನ್ ಬಯಸಿದರೆ, ನೀವು ಹೊಂದಿಸಬಹುದು $modal-fade-transform: scale(.8).

ಅನಿಮೇಷನ್ ತೆಗೆದುಹಾಕಿ

ವೀಕ್ಷಿಸಲು ಮಸುಕಾಗುವ ಬದಲು ಸರಳವಾಗಿ ಗೋಚರಿಸುವ ಮಾದರಿಗಳಿಗಾಗಿ, .fadeನಿಮ್ಮ ಮೋಡಲ್ ಮಾರ್ಕ್‌ಅಪ್‌ನಿಂದ ವರ್ಗವನ್ನು ತೆಗೆದುಹಾಕಿ.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
  ...
</div>

ಡೈನಾಮಿಕ್ ಎತ್ತರಗಳು

ಮೋಡಲ್ ತೆರೆದಿರುವಾಗ ಅದರ ಎತ್ತರವು ಬದಲಾದರೆ, $('#myModal').modal('handleUpdate')ಸ್ಕ್ರಾಲ್‌ಬಾರ್ ಕಾಣಿಸಿಕೊಂಡರೆ ಮೋಡಲ್‌ನ ಸ್ಥಾನವನ್ನು ಮರುಹೊಂದಿಸಲು ನೀವು ಕರೆ ಮಾಡಬೇಕು.

ಪ್ರವೇಶಿಸುವಿಕೆ

ಸೇರಿಸಲು ಮರೆಯದಿರಿ role="dialog"ಮತ್ತು aria-labelledby="...", ಮಾದರಿ ಶೀರ್ಷಿಕೆಯನ್ನು ಉಲ್ಲೇಖಿಸಿ, ಗೆ .modal, ಮತ್ತು role="document"ಸ್ವತಃ .modal-dialog. aria-describedbyಹೆಚ್ಚುವರಿಯಾಗಿ, ನಲ್ಲಿ ನಿಮ್ಮ ಮಾದರಿ ಸಂವಾದದ ವಿವರಣೆಯನ್ನು ನೀವು ನೀಡಬಹುದು .modal.

YouTube ವೀಡಿಯೊಗಳನ್ನು ಎಂಬೆಡ್ ಮಾಡಲಾಗುತ್ತಿದೆ

ಯೂಟ್ಯೂಬ್ ವೀಡಿಯೊಗಳನ್ನು ಮಾದರಿಗಳಲ್ಲಿ ಎಂಬೆಡ್ ಮಾಡಲು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಪ್ಲೇಬ್ಯಾಕ್ ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ನಿಲ್ಲಿಸಲು ಹೆಚ್ಚುವರಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಗತ್ಯವಿದೆ. ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ಈ ಸಹಾಯಕವಾದ ಸ್ಟಾಕ್ ಓವರ್‌ಫ್ಲೋ ಪೋಸ್ಟ್ ಅನ್ನು ನೋಡಿ.

ಐಚ್ಛಿಕ ಗಾತ್ರಗಳು

ಮೋಡಲ್‌ಗಳು ಮೂರು ಐಚ್ಛಿಕ ಗಾತ್ರಗಳನ್ನು ಹೊಂದಿವೆ, ಎ ಮೇಲೆ ಇರಿಸಲು ಮಾರ್ಪಡಿಸುವ ವರ್ಗಗಳ ಮೂಲಕ ಲಭ್ಯವಿದೆ .modal-dialog. ಕಿರಿದಾದ ವ್ಯೂಪೋರ್ಟ್‌ಗಳಲ್ಲಿ ಅಡ್ಡಲಾಗಿರುವ ಸ್ಕ್ರಾಲ್‌ಬಾರ್‌ಗಳನ್ನು ತಪ್ಪಿಸಲು ಈ ಗಾತ್ರಗಳು ಕೆಲವು ಬ್ರೇಕ್‌ಪಾಯಿಂಟ್‌ಗಳಲ್ಲಿ ಕಿಕ್ ಇನ್ ಆಗುತ್ತವೆ.

ಗಾತ್ರ ವರ್ಗ ಮಾದರಿ ಗರಿಷ್ಠ ಅಗಲ
ಚಿಕ್ಕದು .modal-sm 300px
ಡೀಫಾಲ್ಟ್ ಯಾವುದೂ 500px
ದೊಡ್ಡದು .modal-lg 800px
ಹೆಚ್ಚುವರಿ ದೊಡ್ಡದು .modal-xl 1140px

ಮಾರ್ಪಡಿಸುವ ವರ್ಗವಿಲ್ಲದ ನಮ್ಮ ಡೀಫಾಲ್ಟ್ ಮಾದರಿಯು "ಮಧ್ಯಮ" ಗಾತ್ರದ ಮಾದರಿಯನ್ನು ರೂಪಿಸುತ್ತದೆ.

<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>

<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- 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" role="document">
    <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" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

ಬಳಕೆ

ಮೋಡಲ್ ಪ್ಲಗಿನ್ ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಬೇಡಿಕೆಯ ಮೇರೆಗೆ ನಿಮ್ಮ ಗುಪ್ತ ವಿಷಯವನ್ನು ಟಾಗಲ್ ಮಾಡುತ್ತದೆ. ಇದು ಡೀಫಾಲ್ಟ್ ಸ್ಕ್ರೋಲಿಂಗ್ ನಡವಳಿಕೆಯನ್ನು ಅತಿಕ್ರಮಿಸಲು ಸೇರಿಸುತ್ತದೆ ಮತ್ತು .modal-openಮೋಡಲ್‌ನ ಹೊರಗೆ ಕ್ಲಿಕ್ ಮಾಡುವಾಗ ತೋರಿಸಿರುವ ಮಾದರಿಗಳನ್ನು ವಜಾಗೊಳಿಸಲು ಕ್ಲಿಕ್ ಪ್ರದೇಶವನ್ನು ಒದಗಿಸಲು a ಅನ್ನು ಉತ್ಪಾದಿಸುತ್ತದೆ.<body>.modal-backdrop

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳ ಮೂಲಕ

JavaScript ಬರೆಯದೆಯೇ ಮಾದರಿಯನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಿ. data-toggle="modal"ಒಂದು ಬಟನ್‌ನಂತಹ ನಿಯಂತ್ರಕ ಅಂಶದ ಮೇಲೆ ಹೊಂದಿಸಿ data-target="#foo"ಅಥವಾ href="#foo"ಟಾಗಲ್ ಮಾಡಲು ನಿರ್ದಿಷ್ಟ ಮಾದರಿಯನ್ನು ಗುರಿಯಾಗಿಸಲು.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ

myModalಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನ ಒಂದೇ ಸಾಲಿನ ಐಡಿಯೊಂದಿಗೆ ಮಾದರಿಗೆ ಕರೆ ಮಾಡಿ :

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

ಆಯ್ಕೆಗಳು

ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳು ಅಥವಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಆಯ್ಕೆಗಳನ್ನು ರವಾನಿಸಬಹುದು. ಡೇಟಾ ಗುಣಲಕ್ಷಣಗಳಿಗಾಗಿ, ಆಯ್ಕೆಯ ಹೆಸರನ್ನು ಸೇರಿಸಿ data-, data-backdrop="".

ಹೆಸರು ಮಾದರಿ ಡೀಫಾಲ್ಟ್ ವಿವರಣೆ
ಹಿನ್ನೆಲೆ ಬೂಲಿಯನ್ ಅಥವಾ ಸ್ಟ್ರಿಂಗ್'static' ನಿಜ ಮಾದರಿ-ಬ್ಯಾಕ್‌ಡ್ರಾಪ್ ಅಂಶವನ್ನು ಒಳಗೊಂಡಿದೆ. ಪರ್ಯಾಯವಾಗಿ, staticಕ್ಲಿಕ್‌ನಲ್ಲಿ ಅಥವಾ ಎಸ್ಕೇಪ್ ಕೀ ಪ್ರೆಸ್‌ನಲ್ಲಿ ಮಾದರಿಯನ್ನು ಮುಚ್ಚದ ಹಿನ್ನೆಲೆಗಾಗಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಿ.
ಕೀಬೋರ್ಡ್ ಬೂಲಿಯನ್ ನಿಜ ಎಸ್ಕೇಪ್ ಕೀಲಿಯನ್ನು ಒತ್ತಿದಾಗ ಮೋಡಲ್ ಅನ್ನು ಮುಚ್ಚುತ್ತದೆ
ಗಮನ ಬೂಲಿಯನ್ ನಿಜ ಆರಂಭಿಸಿದಾಗ ಮಾದರಿಯ ಮೇಲೆ ಗಮನವನ್ನು ಇರಿಸುತ್ತದೆ.
ತೋರಿಸು ಬೂಲಿಯನ್ ನಿಜ ಪ್ರಾರಂಭಿಸಿದಾಗ ಮಾದರಿಯನ್ನು ತೋರಿಸುತ್ತದೆ.

ವಿಧಾನಗಳು

ಅಸಮಕಾಲಿಕ ವಿಧಾನಗಳು ಮತ್ತು ಪರಿವರ್ತನೆಗಳು

ಎಲ್ಲಾ API ವಿಧಾನಗಳು ಅಸಮಕಾಲಿಕವಾಗಿರುತ್ತವೆ ಮತ್ತು ಪರಿವರ್ತನೆಯನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತವೆ . ಪರಿವರ್ತನೆ ಪ್ರಾರಂಭವಾದ ತಕ್ಷಣ ಅವರು ಕರೆ ಮಾಡುವವರ ಬಳಿಗೆ ಹಿಂತಿರುಗುತ್ತಾರೆ ಆದರೆ ಅದು ಮುಗಿಯುವ ಮೊದಲು . ಹೆಚ್ಚುವರಿಯಾಗಿ, ಪರಿವರ್ತನೆಯ ಘಟಕದಲ್ಲಿನ ವಿಧಾನದ ಕರೆಯನ್ನು ನಿರ್ಲಕ್ಷಿಸಲಾಗುತ್ತದೆ .

ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ನಮ್ಮ JavaScript ದಸ್ತಾವೇಜನ್ನು ನೋಡಿ .

.modal(options)

ನಿಮ್ಮ ವಿಷಯವನ್ನು ಮಾದರಿಯಾಗಿ ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. ಐಚ್ಛಿಕ ಆಯ್ಕೆಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ object.

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

ಒಂದು ಮೋಡಲ್ ಅನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಟಾಗಲ್ ಮಾಡುತ್ತದೆ. ಮೋಡಲ್ ಅನ್ನು ವಾಸ್ತವವಾಗಿ ತೋರಿಸುವ ಅಥವಾ ಮರೆಮಾಡುವ ಮೊದಲು (ಅಂದರೆ ಅಥವಾ ಈವೆಂಟ್ ಸಂಭವಿಸುವ ಮೊದಲು) ಕರೆ ಮಾಡಿದವರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ .shown.bs.modalhidden.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ಈವೆಂಟ್‌ನ ಆಸ್ತಿಯಾಗಿ ಲಭ್ಯವಿದೆ.
ತೋರಿಸಲಾಗಿದೆ.ಬಿಎಸ್.ಮೋಡಲ್ ಮೋಡಲ್ ಅನ್ನು ಬಳಕೆದಾರರಿಗೆ ಗೋಚರಿಸಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ (CSS ಪರಿವರ್ತನೆಗಳು ಪೂರ್ಣಗೊಳ್ಳಲು ಕಾಯುತ್ತದೆ). ಒಂದು ಕ್ಲಿಕ್‌ನಿಂದ ಉಂಟಾಗಿದ್ದರೆ, ಕ್ಲಿಕ್ ಮಾಡಿದ ಅಂಶವು relatedTargetಈವೆಂಟ್‌ನ ಆಸ್ತಿಯಾಗಿ ಲಭ್ಯವಿದೆ.
hide.bs.modal hideನಿದರ್ಶನ ವಿಧಾನವನ್ನು ಕರೆ ಮಾಡಿದಾಗ ಈ ಘಟನೆಯನ್ನು ತಕ್ಷಣವೇ ವಜಾಗೊಳಿಸಲಾಗುತ್ತದೆ .
ಮರೆಮಾಡಲಾಗಿದೆ.ಬಿಎಸ್ ಮಾದರಿ ಬಳಕೆದಾರರಿಂದ ಮೋಡಲ್ ಅನ್ನು ಮರೆಮಾಡಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ (CSS ಪರಿವರ್ತನೆಗಳು ಪೂರ್ಣಗೊಳ್ಳಲು ಕಾಯುತ್ತದೆ).
hidePrevented.bs.modal ಮೋಡಲ್ ಅನ್ನು ತೋರಿಸಿದಾಗ ಈ ಈವೆಂಟ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ, ಅದರ ಬ್ಯಾಕ್‌ಡ್ರಾಪ್ staticಮತ್ತು ಮಾದರಿಯ ಹೊರಗೆ ಒಂದು ಕ್ಲಿಕ್ ಅಥವಾ ಎಸ್ಕೇಪ್ ಕೀ ಪ್ರೆಸ್ ಅನ್ನು ನಿರ್ವಹಿಸಲಾಗುತ್ತದೆ.
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})