Source

ꯃꯣꯗꯜ ꯑꯣꯏꯕꯥ꯫

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

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

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

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

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

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

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

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

ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

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

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

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯏꯕꯥ ꯌꯥꯗꯅꯥ ꯃꯣꯗꯜ ꯑꯃꯥ ꯑꯦꯛꯇꯤꯕ ꯇꯧꯔꯣ꯫ data-toggle="modal"ꯀꯟꯠꯔꯣꯂꯔ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ, ꯕꯇꯟ ꯑꯃꯒꯨꯝꯅꯥ, ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ data-target="#foo"ꯅꯠꯠꯔꯒꯥ href="#foo"ꯇꯣꯒꯜ ꯇꯧꯅꯕꯥ ꯑꯀꯛꯅꯕꯥ ꯃꯣꯗꯦꯜ ꯑꯃꯥ ꯇꯥꯔꯒꯦꯠ ꯇꯧꯅꯕꯥ ꯁꯦꯠ ꯇꯧ꯫

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

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

myModalꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇꯀꯤ ꯂꯥꯏꯟ ꯑꯃꯈꯛꯇꯒꯥ ꯂꯣꯌꯅꯅꯥ id ꯂꯩꯕꯥ ꯃꯣꯗꯜ ꯑꯃꯥ ꯀꯧꯕꯤꯌꯨ :

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

ꯑꯣꯄꯁꯅꯁꯤꯡ ꯂꯩ꯫

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

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

ꯄꯥꯝꯕꯩꯁꯤꯡ꯫

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

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

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

.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ꯏꯟꯁꯇꯦꯟꯁ ꯃꯦꯊꯗ ꯀꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯈꯨꯗꯛꯇꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯀ꯭ꯂꯤꯛ ꯑꯃꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯊꯣꯛꯂꯕꯗꯤ, ꯀ꯭ꯂꯤꯛ ꯇꯧꯔꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ relatedTargetꯑꯗꯨ ꯊꯧꯗꯣꯛ ꯑꯗꯨꯒꯤ ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯣꯏꯅꯥ ꯐꯪꯒꯅꯤ꯫
ꯎꯠꯂꯤꯕꯥ.ꯕꯤ.ꯑꯦꯁ.ꯃꯣꯗꯜ ꯏꯚꯦꯟꯇ ꯑꯁꯤ ꯃꯣꯗꯜ ꯑꯗꯨ ꯌꯨꯖꯔꯅꯥ ꯎꯕꯥ ꯐꯪꯍꯅꯕꯥ ꯃꯇꯃꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ (CSS ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯂꯣꯌꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯉꯥꯏꯒꯅꯤ)꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯀ꯭ꯂꯤꯛ ꯑꯃꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯊꯣꯛꯂꯕꯗꯤ, ꯀ꯭ꯂꯤꯛ ꯇꯧꯔꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ relatedTargetꯑꯗꯨ ꯊꯧꯗꯣꯛ ꯑꯗꯨꯒꯤ ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯣꯏꯅꯥ ꯐꯪꯒꯅꯤ꯫
ꯂꯣꯠꯄꯥ.ꯕꯤ.ꯑꯦꯁ.ꯃꯣꯗꯜ꯫ hideꯏꯟꯁꯇꯦꯟꯁ ꯃꯦꯊꯗ ꯀꯧꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯏꯚꯦꯟꯇ ꯑꯁꯤ ꯈꯨꯗꯛꯇꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
ꯂꯣꯠꯁꯤꯜꯂꯕꯥ.ꯕꯤ.ꯑꯦꯁ.ꯃꯣꯗꯜ꯫ ꯏꯚꯦꯟꯇ ꯑꯁꯤ ꯃꯣꯗꯦꯜ ꯑꯗꯨ ꯌꯨꯖꯔꯗꯒꯤ ꯂꯣꯠꯁꯤꯅꯕꯥ ꯂꯣꯌꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ (CSS ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯂꯣꯌꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯉꯥꯏꯒꯅꯤ)꯫
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})