ꯃꯔꯨꯑꯣꯏꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯆꯠꯂꯨ꯫ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯁꯤꯡ ꯅꯦꯚꯤꯒꯦꯁꯅꯗꯥ ꯆꯠꯂꯨ꯫
in English

ꯃꯣꯗꯜ ꯑꯣꯏꯕꯥ꯫

ꯂꯥꯏꯇꯕꯣꯛꯁꯁꯤꯡ, ꯌꯨꯖꯔ ꯅꯣꯇꯤꯐꯤꯀꯦꯁꯅꯁꯤꯡ, ꯅꯠꯠꯔꯒꯥ ꯃꯄꯨꯡꯐꯥꯅꯥ ꯀꯁ꯭ꯇꯝ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯅꯍꯥꯛꯀꯤ ꯁꯥꯏꯇꯇꯥ ꯗꯥꯏꯑꯦꯂꯣꯒꯁꯤꯡ ꯍꯥꯄꯆꯤꯟꯅꯕꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯃꯣꯗꯦꯜ ꯄ꯭ꯂꯒꯏꯟ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯄꯦꯖ ꯑꯁꯤꯗꯥ ꯌꯥꯑꯣꯔꯤ꯫

ꯃꯁꯤ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯃꯣꯗꯦꯜ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯍꯧꯗ꯭ꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ, ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤ ꯁꯣꯏꯗꯅꯥ ꯄꯥꯕꯤꯌꯨ ꯃꯔꯃꯗꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯃꯦꯅꯨ ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯍꯟꯗꯛꯇꯥ ꯍꯣꯡꯂꯦ꯫

  • ꯃꯣꯗꯦꯂꯁꯤꯡ ꯑꯁꯤ HTML, CSS, ꯑꯃꯁꯨꯡ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯦꯃꯒꯠꯂꯤ꯫ ꯃꯈꯣꯌ ꯑꯁꯤ ꯗꯣꯛꯌꯨꯃꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯂꯩꯔꯤꯕꯥ ꯑꯇꯩ ꯄꯨꯝꯅꯃꯛꯀꯤ ꯃꯊꯛꯇꯥ ꯄꯣꯖꯤꯁꯟ ꯇꯧꯏ ꯑꯃꯁꯨꯡ <body>ꯃꯗꯨꯒꯤ ꯃꯍꯨꯠꯇꯥ ꯃꯣꯗꯦꯜ ꯀꯟꯇꯦꯟꯇ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧꯕꯥ ꯌꯥꯅꯕꯥ ꯁ꯭ꯛꯔꯣꯜ ꯑꯗꯨ ꯂꯧꯊꯣꯀꯏ꯫
  • ꯃꯣꯗꯜ “ꯕꯦꯀꯗ꯭ꯔꯣꯞ” ꯑꯗꯨꯗꯥ ꯀ꯭ꯂꯤꯛ ꯇꯧꯕꯅꯥ ꯃꯣꯗꯜ ꯑꯗꯨ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯂꯣꯗ ꯇꯧꯒꯅꯤ꯫
  • ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯅꯥ ꯃꯇꯝ ꯑꯃꯗꯥ ꯃꯣꯗꯦꯜ ꯎꯏꯟꯗꯣ ꯑꯃꯈꯛꯇꯃꯛ ꯁꯄꯣꯔꯠ ꯇꯧꯏ꯫ ꯅꯦꯁ꯭ꯇꯦꯗ ꯃꯣꯗꯦꯂꯁꯤꯡ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯅꯥ ꯊꯥꯖꯩ ꯃꯗꯨꯗꯤ ꯃꯈꯣꯌ ꯑꯁꯤ ꯌꯨꯖꯔ ꯑꯦꯛꯁꯄꯤꯔꯤꯑꯦꯟꯁꯁꯤꯡ ꯑꯁꯤ ꯐꯠꯇꯕꯥ ꯑꯣꯏ ꯍꯥꯌꯅꯥ ꯊꯥꯖꯩ꯫
  • ꯃꯣꯗꯦꯂꯁꯤꯡꯅꯥ ꯁꯤꯖꯤꯟꯅꯩ position: fixed, ꯃꯁꯤꯅꯥ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯃꯇꯃꯗꯥ ꯃꯁꯤꯒꯤ ꯔꯦꯟꯗꯔ ꯇꯧꯕꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯈꯔꯥ ꯑꯀꯛꯅꯕꯥ ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ ꯌꯥꯔꯤꯕꯃꯈꯩ, ꯑꯇꯣꯞꯄꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯒꯤ ꯄꯣꯇꯦꯟꯁꯤꯑꯦꯜ ꯏꯟꯇꯔꯐꯦꯔꯦꯟꯁ ꯂꯩꯍꯟꯗꯅꯕꯥ ꯅꯍꯥꯛꯀꯤ ꯃꯣꯗꯜ HTML ꯑꯗꯨ ꯃꯊꯛꯀꯤ ꯊꯥꯛꯀꯤ ꯄꯣꯖꯤꯁꯟ ꯑꯃꯗꯥ ꯊꯝꯃꯨ꯫ .modalꯑꯇꯣꯞꯄꯥ ꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯥ ꯅꯦꯁ꯭ꯠ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯅꯍꯥꯛꯅꯥ ꯏꯁꯨꯁꯤꯡ ꯊꯦꯡꯅꯔꯀꯄꯥ ꯌꯥꯏ꯫
  • ꯑꯃꯨꯛ ꯍꯟꯅꯥ, ꯃꯔꯝ ꯑꯁꯤꯅꯥ position: fixed, ꯃꯣꯕꯥꯏꯜ ꯗꯤꯚꯥꯏꯁꯁꯤꯡꯗꯥ ꯃꯣꯗꯦꯂꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯕꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯆꯦꯀꯁꯤꯅꯋꯥ ꯈꯔꯥ ꯂꯩꯔꯤ꯫ ꯑꯀꯨꯞꯄꯥ ꯃꯔꯣꯂꯒꯤꯗꯃꯛꯇꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯕ꯭ꯔꯥꯎꯖꯔ ꯁꯄꯣꯔꯠ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯁꯤꯡ ꯌꯦꯡꯕꯤꯌꯨ꯫
  • HTML5ꯅꯥ ꯃꯁꯤꯒꯤ ꯁꯦꯃꯦꯟꯇꯤꯛꯁ ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯗꯤꯐꯥꯏꯟ ꯇꯧꯕꯒꯦ ꯍꯥꯌꯕꯗꯨꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ, HTML autofocusꯑꯦꯠꯔꯤꯕꯤꯎꯠ ꯑꯁꯤꯅꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯃꯣꯗꯦꯂꯁꯤꯡꯗꯥ ꯏꯐꯦꯛꯇ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ꯫ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯏꯐꯦꯛꯇ ꯑꯗꯨ ꯐꯪꯅꯕꯒꯤꯗꯃꯛ, ꯀꯁ꯭ꯇꯝ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯈꯔꯥ ꯁꯤꯖꯤꯟꯅꯧ:
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>

ꯇꯣꯉꯥꯟ-ꯇꯣꯉꯥꯅꯕꯥ ꯃꯣꯗꯦꯜ ꯀꯟꯇꯦꯟꯇ꯫

ꯄꯨꯝꯅꯃꯛꯅꯥ ꯈꯔꯥ ꯇꯣꯉꯥꯅꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯃꯣꯗꯜ ꯑꯗꯨ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯕꯥ ꯕꯇꯅꯁꯤꯡꯒꯤ ꯈꯣꯉꯕꯨ ꯑꯃꯥ ꯂꯩꯕ꯭ꯔꯥ? ꯀꯔꯝꯕꯥ ꯕꯇꯟ ꯑꯗꯨ ꯀ꯭ꯂꯤꯛ ꯇꯧꯈꯤꯕꯒꯦ ꯍꯥꯌꯕꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯃꯣꯗꯦꯂꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯧ event.relatedTargetꯑꯃꯁꯨꯡ HTML data-bs-*ꯑꯦꯠꯔꯤꯕ꯭ꯌꯨꯠꯁꯤꯡ꯫

ꯃꯈꯥꯗꯥ ꯂꯥꯏꯚ ꯗꯦꯃꯣ ꯑꯃꯥ ꯌꯥꯑꯣꯔꯤ ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ HTML ꯑꯃꯁꯨꯡ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯌꯥꯑꯣꯔꯤ꯫ ꯑꯍꯦꯅꯕꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯅꯒꯤꯗꯃꯛꯇꯥ , 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"ꯑꯩꯈꯣꯌꯅꯥ ꯍꯥꯟꯅꯅꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯀꯄꯗꯒꯤ ꯅꯍꯥꯛꯅꯥ ꯍꯥꯄꯆꯤꯅꯕꯒꯤ ꯃꯊꯧ ꯇꯥꯗꯦ ꯍꯥꯌꯕꯥ ꯈꯉꯕꯤꯌꯨ꯫

ꯏꯎꯇꯤꯎꯕ ꯚꯤꯗꯤꯑꯣꯁꯤꯡ ꯑꯦꯝꯕꯦꯗ ꯇꯧꯕꯥ꯫

ꯃꯣꯗꯦꯂꯁꯤꯡꯗꯥ ꯏꯎꯇꯤꯎꯕ ꯚꯤꯗꯤꯑꯣꯁꯤꯡ ꯑꯦꯝꯕꯦꯗ ꯇꯧꯕꯗꯥ ꯄ꯭ꯂꯦꯕꯦꯛ ꯑꯃꯁꯨꯡ ꯑꯇꯩ ꯃꯁꯥ ꯃꯊꯟꯇꯥ ꯊꯤꯡꯅꯕꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯂꯩꯇꯕꯥ ꯑꯍꯦꯅꯕꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯃꯊꯧ ꯇꯥꯏ꯫ ꯑꯍꯦꯅꯕꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯅꯒꯤꯗꯃꯛꯇꯥ ꯃꯇꯦꯡ ꯑꯣꯏꯕꯥ ꯁ꯭ꯇꯦꯛ ꯑꯣꯚꯔꯐ꯭ꯂꯣ ꯄꯣꯁ꯭ꯠ ꯑꯁꯤ ꯌꯦꯡꯕꯤꯌꯨ꯫

ꯑꯣꯄꯁꯅꯦꯜ ꯁꯥꯏꯖꯁꯤꯡ꯫

ꯃꯣꯗꯦꯂꯁꯤꯡ ꯑꯁꯤ ꯑꯣꯄꯁꯅꯦꯜ ꯁꯥꯏꯖ ꯑꯍꯨꯝ ꯂꯩ, ꯃꯁꯤꯗꯥ ꯊꯝꯅꯕꯥ ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ .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);
      }
    }
  }
}

ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

ꯃꯣꯗꯦꯜ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯗꯤꯃꯥꯟꯗ ꯇꯧꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ, ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯇꯣꯒꯜ ꯇꯧꯏ꯫ ꯃꯁꯤꯅꯥ ꯗꯤꯐꯣꯜꯇ ꯁ꯭ꯛꯔꯣꯂꯤꯡ ꯕꯤꯍꯦꯕꯤꯌꯔꯁꯨ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯏ ꯑꯃꯁꯨꯡ .modal-backdropꯃꯣꯗꯦꯂꯒꯤ ꯃꯄꯥꯟꯗꯥ ꯀ꯭ꯂꯤꯛ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯎꯠꯂꯤꯕꯥ ꯃꯣꯗꯦꯂꯁꯤꯡ ꯊꯥꯗꯣꯛꯅꯕꯥ ꯀ꯭ꯂꯤꯛ ꯑꯦꯔꯤꯌꯥ ꯑꯃꯥ ꯄꯤꯅꯕꯥ a ꯖꯦꯅꯦꯔꯦꯠ ꯇꯧꯏ꯫

ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ꯫

ꯇꯣꯒꯜ ꯇꯧꯕꯥ꯫

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯏꯕꯥ ꯌꯥꯗꯅꯥ ꯃꯣꯗꯜ ꯑꯃꯥ ꯑꯦꯛꯇꯤꯕ ꯇꯧꯔꯣ꯫ ꯀꯟꯠꯔꯣꯂꯔ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯁꯦꯠ ꯇꯧ 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>

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ꯫

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯂꯥꯏꯟ ꯑꯃꯈꯛꯇꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯣꯗꯜ ꯑꯃꯥ ꯁꯦꯝꯃꯨ:

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯄꯥꯁ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯗꯦꯇꯥ ꯑꯦꯠꯔꯤꯕꯤꯎꯇꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, ꯑꯣꯄꯁꯅꯒꯤ ꯃꯃꯤꯡ ꯑꯗꯨ data-bs-, data-bs-backdrop="".

ꯃꯤꯡ ꯃꯈꯜ ꯀꯥꯡꯂꯣꯟ ꯏꯟꯗꯕ ꯋꯥꯔꯣꯜ
backdrop ꯕꯨꯂꯦꯟ ꯅꯠꯠꯔꯒꯥ ꯁ꯭ꯠꯔꯤꯡ ꯑꯗꯨ꯫'static' true ꯃꯣꯗꯜ-ꯕꯦꯀꯗ꯭ꯔꯣꯞ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯌꯥꯑꯣꯔꯤ꯫ ꯅꯠꯠꯔꯒꯥ, staticꯀ꯭ꯂꯤꯛ ꯇꯧꯕꯗꯥ ꯃꯣꯗꯦꯜ ꯑꯗꯨ ꯂꯣꯗ ꯇꯧꯗꯕꯥ ꯕꯦꯀꯗ꯭ꯔꯣꯞ ꯑꯃꯒꯤꯗꯃꯛ ꯇꯥꯀꯄꯤꯌꯨ꯫
keyboard ꯕꯨꯂꯦꯅꯒꯤ ꯑꯣꯏꯕꯥ꯫ true ꯑꯦꯁ꯭ꯀꯦꯞ ꯀꯤ ꯑꯃꯥ ꯊꯝꯂꯕꯥ ꯃꯇꯃꯗꯥ ꯃꯣꯗꯜ ꯑꯗꯨ ꯂꯣꯗ ꯇꯧꯏ꯫
focus ꯕꯨꯂꯦꯅꯒꯤ ꯑꯣꯏꯕꯥ꯫ true ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯃꯣꯗꯦꯂꯗꯥ ꯃꯤꯠꯌꯦꯡ ꯊꯝꯂꯤ꯫

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

ꯑꯦꯁꯤꯅꯛꯔꯣꯅꯣꯁ ꯃꯦꯊꯗꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ꯫

ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯒꯤ ꯃꯦꯊꯗ ꯄꯨꯝꯅꯃꯛ ꯑꯁꯤ ꯑꯦꯁꯤꯅꯛꯔꯣꯅꯣꯁ ꯑꯣꯏ ꯑꯃꯁꯨꯡ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯑꯃꯥ ꯍꯧꯏ . ꯃꯈꯣꯌꯅꯥ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯍꯧꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ ꯑꯗꯨꯕꯨ ꯂꯣꯏꯗ꯭ꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ ꯀꯣꯜ ꯇꯧꯔꯤꯕꯥ ꯃꯤꯑꯣꯏ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ . ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ, ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯇꯧꯔꯤꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯃꯗꯥ ꯃꯦꯊꯗ ꯀꯣꯜ ꯑꯃꯥ ꯏꯒꯅꯣꯔ ꯇꯧꯒꯅꯤ .

ꯑꯍꯦꯅꯕꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯅꯒꯤꯗꯃꯛꯇꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯦꯁꯟ ꯌꯦꯡꯕꯤꯌꯨ .

ꯄꯥꯁ ꯇꯧꯕꯒꯤ ꯑꯣꯄꯁꯅꯁꯤꯡ꯫

ꯅꯍꯥꯛꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯃꯣꯗꯦꯜ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯑꯦꯛꯇꯤꯕ ꯇꯧꯏ꯫ ꯑꯣꯄꯁꯅꯦꯜ ꯑꯣꯄꯁꯟ ꯑꯃꯥ ꯌꯥꯔꯦ object.

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
  keyboard: false
})

ꯇꯣꯒꯜ ꯇꯧꯕꯥ꯫

ꯃꯣꯗꯜ ꯑꯃꯥ ꯃꯦꯅꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯇꯣꯒꯜ ꯇꯧꯏ꯫ ꯃꯣꯗꯜ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯎꯠꯄꯥ ꯅꯠꯠꯔꯒꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯑꯔꯕꯥꯟ shown.bs.modalꯅꯠꯠꯔꯒꯥ hidden.bs.modalꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯂꯔ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ꯫

myModal.toggle()

ꯎꯠꯄ

ꯃꯣꯗꯜ ꯑꯃꯥ ꯃꯦꯅꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯍꯥꯡꯗꯣꯀꯏ꯫ ꯃꯣꯗꯜ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯎꯠꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯑꯔꯕꯥꯟ shown.bs.modalꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯜ ꯇꯧꯔꯤꯕꯥ ꯃꯤꯑꯣꯏ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ꯫

myModal.show()

ꯃꯁꯤꯗꯁꯨ ꯅꯠꯇꯅꯥ, ꯅꯍꯥꯛꯅꯥ ꯃꯣꯗꯦꯜ ꯏꯚꯦꯟꯇꯁꯤꯡꯗꯥ ( relatedTargetꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯣꯏꯅꯥ) ꯂꯧꯕꯥ ꯌꯥꯕꯥ ꯑꯥꯔꯒꯨꯃꯦꯟꯇ ꯑꯃꯥ ꯑꯣꯏꯅꯥ DOM ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯄꯥꯁ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)

ꯂꯣꯠꯄ

ꯃꯣꯗꯜ ꯑꯃꯥ ꯃꯦꯅꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫ ꯃꯣꯗꯜ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯑꯔꯕꯥꯟ hidden.bs.modalꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯂꯔ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ꯫

myModal.hide()

ꯍꯦꯟꯗꯜ ꯇꯧꯕꯥ ꯑꯄꯗꯦꯠ ꯇꯧꯕꯥ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯃꯣꯗꯦꯜ ꯑꯃꯒꯤ ꯑꯋꯥꯡꯕꯥ ꯑꯗꯨ ꯍꯥꯡꯗꯣꯛꯂꯤꯉꯩꯗꯥ ꯍꯣꯡꯂꯛꯂꯕꯗꯤ (ꯑꯔꯕꯥꯟ ꯁ꯭ꯛꯔꯣꯂꯕꯥꯔ ꯑꯃꯥ ꯊꯣꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ) ꯃꯣꯗꯦꯂꯒꯤ ꯄꯣꯖꯤꯁꯟ ꯑꯗꯨ ꯃꯦꯟꯌꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯁꯦꯃꯖꯤꯜꯂꯨ꯫

myModal.handleUpdate()

ꯗꯤꯁꯄꯣꯖ ꯇꯧꯕꯥ꯫

ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯃꯣꯗꯜ ꯑꯃꯥ ꯃꯥꯡꯍꯜꯂꯤ꯫ (ꯗꯤ.ꯑꯣ.ꯑꯦꯝ.ꯒꯤ ꯑꯦꯂꯤꯃꯦꯟꯇꯇꯥ ꯊꯝꯂꯤꯕꯥ ꯗꯦꯇꯥ ꯑꯗꯨ ꯂꯧꯊꯣꯀꯏ)

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-keyboardfalse
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
  // do something...
})