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" > × </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>
ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯕꯇꯟ ꯑꯗꯨ ꯀ꯭ꯂꯤꯛ ꯇꯧꯗꯨꯅꯥ ꯊꯕꯛ ꯇꯧꯔꯤꯕꯥ ꯃꯣꯗꯦꯜ ꯗꯦꯃꯣ ꯑꯃꯥ ꯇꯣꯒꯜ ꯇꯧ꯫ ꯃꯁꯤ ꯃꯈꯥꯗꯥ ꯁ꯭ꯂꯥꯏꯗ ꯇꯧꯒꯅꯤ ꯑꯃꯁꯨꯡ ꯄꯦꯖꯒꯤ ꯃꯊꯛꯇꯒꯤ ꯐꯤꯗ ꯏꯟ ꯇꯧꯒꯅꯤ꯫
Woohoo, you're reading this text in a modal!
ꯗꯦꯃꯣ ꯃꯣꯗꯦꯜ ꯍꯧꯗꯣꯀꯄꯥ꯫
ꯀꯣꯄꯤ ꯇꯧꯕꯥ꯫
<!-- 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" > × </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>
ꯃꯣꯗꯦꯂꯁꯤꯡ ꯑꯁꯤ ꯌꯨꯖꯔꯒꯤ ꯚꯤꯎꯄꯣꯔꯠ ꯅꯠꯠꯔꯒꯥ ꯗꯤꯚꯥꯏꯁꯀꯤꯗꯃꯛꯇꯥ ꯌꯥꯝꯅꯥ ꯁꯥꯡꯂꯕꯥ ꯃꯇꯃꯗꯥ, ꯃꯈꯣꯌꯅꯥ ꯄꯦꯖ ꯃꯁꯥꯃꯛꯇꯒꯤ ꯃꯁꯥ ꯃꯊꯟꯇꯥ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧꯏ꯫ ꯑꯩꯈꯣꯌꯅꯥ ꯀꯔꯤ ꯍꯥꯌꯔꯤꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯌꯦꯡꯅꯕꯒꯤꯗꯃꯛ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯗꯦꯃꯣ ꯑꯁꯤ ꯍꯣꯠꯅꯕꯤꯌꯨ꯫
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
ꯗꯦꯃꯣ ꯃꯣꯗꯦꯜ ꯍꯧꯗꯣꯀꯄꯥ꯫
ꯀꯣꯄꯤ ꯇꯧꯕꯥ꯫
<!-- 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" > × </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
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
ꯗꯦꯃꯣ ꯃꯣꯗꯦꯜ ꯍꯧꯗꯣꯀꯄꯥ꯫
ꯀꯣꯄꯤ ꯇꯧꯕꯥ꯫
<!-- 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" > × </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>
ꯇꯨꯂꯇꯤꯄꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯄꯣꯄꯣꯚꯔꯁꯤꯡ ꯑꯁꯤ ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯃꯣꯗꯂꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯊꯝꯕꯥ ꯌꯥꯏ꯫ ꯃꯣꯗꯦꯂꯁꯤꯡ ꯊꯤꯡꯖꯤꯅꯕꯥ ꯃꯇꯃꯗꯥ, ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯇꯨꯂꯇꯤꯞ ꯑꯃꯍꯦꯛꯇ ꯑꯃꯁꯨꯡ ꯄꯣꯄꯣꯚꯔꯁꯤꯡꯁꯨ ꯃꯁꯥ ꯃꯊꯟꯇꯥ ꯊꯥꯗꯣꯀꯏ꯫
Popover in a modal
This button triggers a popover on click.
Tooltips in a modal
This link and that link have tooltips on hover.
ꯗꯦꯃꯣ ꯃꯣꯗꯦꯜ ꯍꯧꯗꯣꯀꯄꯥ꯫
ꯀꯣꯄꯤ ꯇꯧꯕꯥ꯫
<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
. ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ, ꯅꯍꯥꯛꯅꯥ ꯑꯇꯣꯞꯄꯥ ꯃꯐꯝ ꯑꯃꯗꯥ ꯇꯧꯕꯒꯨꯝꯅꯥ ꯅꯣꯔꯃꯦꯜ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫
.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-auto
.col-md-2 .ml-auto
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
ꯗꯦꯃꯣ ꯃꯣꯗꯦꯜ ꯍꯧꯗꯣꯀꯄꯥ꯫
ꯀꯣꯄꯤ ꯇꯧꯕꯥ꯫
<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
.
@mdoꯒꯤꯗꯃꯛ ꯑꯣꯄꯟ ꯃꯣꯗꯜ꯫
@fatꯒꯤꯗꯃꯛ ꯑꯣꯄꯟ ꯃꯣꯗꯜ꯫
@getbootstrapꯒꯤꯗꯃꯛ ꯑꯣꯄꯟ ꯃꯣꯗꯜ꯫
ꯀꯣꯄꯤ ꯇꯧꯕꯥ꯫
<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" > × </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="..."
.modal
role="document"
.modal-dialog
aria-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
ꯀ꯭ꯂꯤꯛ ꯇꯧꯕꯗꯥ ꯃꯣꯗꯦꯜ ꯑꯗꯨ ꯂꯣꯗ ꯇꯧꯗꯕꯥ ꯕꯦꯀꯗ꯭ꯔꯣꯞ ꯑꯃꯒꯤꯗꯃꯛ ꯇꯥꯀꯄꯤꯌꯨ꯫
ꯀꯤꯕꯣꯔꯗ꯫
ꯕꯨꯂꯦꯅꯒꯤ ꯑꯣꯏꯕꯥ꯫
ꯑꯆꯨꯝꯕ
ꯑꯦꯁ꯭ꯀꯦꯞ ꯀꯤ ꯑꯃꯥ ꯊꯝꯂꯕꯥ ꯃꯇꯃꯗꯥ ꯃꯣꯗꯜ ꯑꯗꯨ ꯂꯣꯗ ꯇꯧꯏ꯫
ꯃꯤꯠꯌꯦꯡ ꯆꯪꯕ
ꯕꯨꯂꯦꯅꯒꯤ ꯑꯣꯏꯕꯥ꯫
ꯑꯆꯨꯝꯕ
ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯃꯣꯗꯦꯂꯗꯥ ꯃꯤꯠꯌꯦꯡ ꯊꯝꯂꯤ꯫
ꯎꯠꯄ
ꯕꯨꯂꯦꯅꯒꯤ ꯑꯣꯏꯕꯥ꯫
ꯑꯆꯨꯝꯕ
ꯏꯅꯤꯁꯤꯑꯦꯂꯥꯏꯖ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯃꯣꯗꯦꯜ ꯑꯗꯨ ꯎꯠꯂꯤ꯫
ꯑꯦꯁꯤꯅꯛꯔꯣꯅꯣꯁ ꯃꯦꯊꯗꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ꯫
ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯒꯤ ꯃꯦꯊꯗ ꯄꯨꯝꯅꯃꯛ ꯑꯁꯤ ꯑꯦꯁꯤꯅꯛꯔꯣꯅꯣꯁ ꯑꯣꯏ ꯑꯃꯁꯨꯡ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯑꯃꯥ ꯍꯧꯏ . ꯃꯈꯣꯌꯅꯥ ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯍꯧꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ ꯑꯗꯨꯕꯨ ꯂꯣꯏꯗ꯭ꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ ꯀꯣꯜ ꯇꯧꯔꯤꯕꯥ ꯃꯤꯑꯣꯏ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ . ꯃꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ, ꯇ꯭ꯔꯥꯟꯁꯤꯁꯟ ꯇꯧꯔꯤꯕꯥ ꯀꯝꯄꯣꯅꯦꯟꯇ ꯑꯃꯗꯥ ꯃꯦꯊꯗ ꯀꯣꯜ ꯑꯃꯥ ꯏꯒꯅꯣꯔ ꯇꯧꯒꯅꯤ .
ꯑꯍꯦꯅꯕꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯅꯒꯤꯗꯃꯛꯇꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯦꯁꯟ ꯌꯦꯡꯕꯤꯌꯨ꯫
ꯅꯍꯥꯛꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯃꯣꯗꯦꯜ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯑꯦꯛꯇꯤꯕ ꯇꯧꯏ꯫ ꯑꯣꯄꯁꯅꯦꯜ ꯑꯣꯄꯁꯟ ꯑꯃꯥ ꯌꯥꯔꯦ object
.
ꯀꯣꯄꯤ ꯇꯧꯕꯥ꯫
$ ( '#myModal' ). modal ({
keyboard : false
})
ꯃꯣꯗꯜ ꯑꯃꯥ ꯃꯦꯅꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯇꯣꯒꯜ ꯇꯧꯏ꯫ ꯃꯣꯗꯜ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯎꯠꯄꯥ ꯅꯠꯠꯔꯒꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯑꯔꯕꯥꯟ shown.bs.modal
ꯅꯠꯠꯔꯒꯥ hidden.bs.modal
ꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯂꯔ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ꯫
ꯀꯣꯄꯤ ꯇꯧꯕꯥ꯫
$ ( '#myModal' ). modal ( 'toggle' )
ꯃꯣꯗꯜ ꯑꯃꯥ ꯃꯦꯅꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯍꯥꯡꯗꯣꯀꯏ꯫ ꯃꯣꯗꯜ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯎꯠꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯑꯔꯕꯥꯟ shown.bs.modal
ꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯂꯔ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ꯫
ꯀꯣꯄꯤ ꯇꯧꯕꯥ꯫
$ ( '#myModal' ). modal ( 'show' )
ꯃꯣꯗꯜ ꯑꯃꯥ ꯃꯦꯅꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫ ꯃꯣꯗꯜ ꯑꯗꯨ ꯇꯁꯦꯡꯅꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯃꯇꯨꯡꯗꯥ (ꯑꯔꯕꯥꯟ hidden.bs.modal
ꯊꯧꯗꯣꯛ ꯑꯗꯨ ꯊꯣꯛꯂꯛꯠꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ) ꯀꯣꯂꯔ ꯑꯗꯨꯗꯥ ꯍꯜꯂꯀꯏ꯫
ꯀꯣꯄꯤ ꯇꯧꯕꯥ꯫
$ ( '#myModal' ). modal ( 'hide' )
ꯀꯔꯤꯒꯨꯝꯕꯥ ꯃꯣꯗꯦꯜ ꯑꯃꯒꯤ ꯑꯋꯥꯡꯕꯥ ꯑꯗꯨ ꯍꯥꯡꯗꯣꯛꯂꯤꯉꯩꯗꯥ ꯍꯣꯡꯂꯛꯂꯕꯗꯤ (ꯑꯔꯕꯥꯟ ꯁ꯭ꯛꯔꯣꯂꯕꯥꯔ ꯑꯃꯥ ꯊꯣꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ) ꯃꯣꯗꯦꯂꯒꯤ ꯄꯣꯖꯤꯁꯟ ꯑꯗꯨ ꯃꯦꯟꯌꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯁꯦꯃꯖꯤꯜꯂꯨ꯫
ꯀꯣꯄꯤ ꯇꯧꯕꯥ꯫
$ ( '#myModal' ). modal ( 'handleUpdate' )
ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯃꯣꯗꯜ ꯑꯃꯥ ꯃꯥꯡꯍꯜꯂꯤ꯫
ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯃꯣꯗꯦꯜ ꯀ꯭ꯂꯥꯁ ꯑꯁꯤꯅꯥ ꯃꯣꯗꯦꯜ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤꯗꯥ ꯍꯨꯛ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯊꯧꯗꯣꯛ ꯈꯔꯥ ꯑꯦꯛꯁꯄꯣꯖ ꯇꯧꯏ꯫ ꯃꯣꯗꯦꯂꯒꯤ ꯊꯧꯗꯣꯛ ꯄꯨꯝꯅꯃꯛ ꯃꯣꯗꯦꯜ ꯃꯁꯥꯃꯛꯇꯗꯥ (ꯑꯔꯕꯥꯟ <div class="modal">
) ꯐꯥꯏꯔ ꯇꯧꯏ꯫
ꯏꯚꯦꯟꯇ ꯃꯈꯜ꯫
ꯋꯥꯔꯣꯜ
ꯁꯣ.ꯕꯤ.ꯑꯦꯁ.ꯃꯣꯗꯜ ꯇꯧꯕꯥ꯫
show
ꯏꯟꯁꯇꯦꯟꯁ ꯃꯦꯊꯗ ꯀꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯊꯧꯗꯣꯛ ꯑꯁꯤ ꯈꯨꯗꯛꯇꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯀ꯭ꯂꯤꯛ ꯑꯃꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯊꯣꯛꯂꯕꯗꯤ, ꯀ꯭ꯂꯤꯛ ꯇꯧꯔꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ relatedTarget
ꯑꯗꯨ ꯊꯧꯗꯣꯛ ꯑꯗꯨꯒꯤ ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯣꯏꯅꯥ ꯐꯪꯒꯅꯤ꯫
ꯎꯠꯂꯤꯕꯥ.ꯕꯤ.ꯑꯦꯁ.ꯃꯣꯗꯜ
ꯏꯚꯦꯟꯇ ꯑꯁꯤ ꯃꯣꯗꯜ ꯑꯗꯨ ꯌꯨꯖꯔꯅꯥ ꯎꯕꯥ ꯐꯪꯍꯅꯕꯥ ꯃꯇꯃꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ (CSS ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯂꯣꯌꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯉꯥꯏꯒꯅꯤ)꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯀ꯭ꯂꯤꯛ ꯑꯃꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯊꯣꯛꯂꯕꯗꯤ, ꯀ꯭ꯂꯤꯛ ꯇꯧꯔꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ relatedTarget
ꯑꯗꯨ ꯊꯧꯗꯣꯛ ꯑꯗꯨꯒꯤ ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯑꯣꯏꯅꯥ ꯐꯪꯒꯅꯤ꯫
ꯂꯣꯠꯄꯥ.ꯕꯤ.ꯑꯦꯁ.ꯃꯣꯗꯜ꯫
hide
ꯏꯟꯁꯇꯦꯟꯁ ꯃꯦꯊꯗ ꯀꯧꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯏꯚꯦꯟꯇ ꯑꯁꯤ ꯈꯨꯗꯛꯇꯥ ꯐꯥꯏꯔ ꯇꯧꯏ꯫
ꯂꯣꯠꯁꯤꯜꯂꯕꯥ.ꯕꯤ.ꯑꯦꯁ.ꯃꯣꯗꯜ꯫
ꯏꯚꯦꯟꯇ ꯑꯁꯤ ꯃꯣꯗꯦꯜ ꯑꯗꯨ ꯌꯨꯖꯔꯗꯒꯤ ꯂꯣꯠꯁꯤꯅꯕꯥ ꯂꯣꯌꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯐꯥꯏꯔ ꯇꯧꯏ (CSS ꯇ꯭ꯔꯥꯟꯁꯤꯁꯅꯁꯤꯡ ꯂꯣꯌꯔꯕꯥ ꯃꯇꯨꯡꯗꯥ ꯉꯥꯏꯒꯅꯤ)꯫
ꯀꯣꯄꯤ ꯇꯧꯕꯥ꯫
$ ( '#myModal' ). on ( 'hidden.bs.modal' , function ( e ) {
// do something...
})