Sourceਮਾਡਲ
ਲਾਈਟਬਾਕਸ, ਉਪਭੋਗਤਾ ਸੂਚਨਾਵਾਂ, ਜਾਂ ਪੂਰੀ ਤਰ੍ਹਾਂ ਕਸਟਮ ਸਮੱਗਰੀ ਲਈ ਆਪਣੀ ਸਾਈਟ ਵਿੱਚ ਡਾਇਲਾਗ ਜੋੜਨ ਲਈ ਬੂਟਸਟਰੈਪ ਦੇ JavaScript ਮਾਡਲ ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਬੂਟਸਟਰੈਪ ਦੇ ਮਾਡਲ ਕੰਪੋਨੈਂਟ ਨਾਲ ਸ਼ੁਰੂਆਤ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਹੇਠਾਂ ਦਿੱਤੇ ਨੂੰ ਪੜ੍ਹਨਾ ਯਕੀਨੀ ਬਣਾਓ ਕਿਉਂਕਿ ਸਾਡੇ ਮੀਨੂ ਵਿਕਲਪ ਹਾਲ ਹੀ ਵਿੱਚ ਬਦਲ ਗਏ ਹਨ।
ਮਾਡਲ HTML, CSS, ਅਤੇ JavaScript ਨਾਲ ਬਣਾਏ ਗਏ ਹਨ। ਉਹ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਬਾਕੀ ਸਭ ਕੁਝ ਉੱਤੇ ਸਥਿਤ ਹਨ ਅਤੇ ਇਸ ਤੋਂ ਸਕ੍ਰੌਲ ਨੂੰ ਹਟਾ ਦਿੰਦੇ ਹਨ <body>
ਤਾਂ ਜੋ ਇਸ ਦੀ ਬਜਾਏ ਮਾਡਲ ਸਮੱਗਰੀ ਸਕ੍ਰੌਲ ਹੋ ਸਕੇ।
ਮਾਡਲ "ਬੈਕਡ੍ਰੌਪ" 'ਤੇ ਕਲਿੱਕ ਕਰਨ ਨਾਲ ਮਾਡਲ ਆਪਣੇ ਆਪ ਬੰਦ ਹੋ ਜਾਵੇਗਾ।
ਬੂਟਸਟਰੈਪ ਇੱਕ ਸਮੇਂ ਵਿੱਚ ਸਿਰਫ ਇੱਕ ਮਾਡਲ ਵਿੰਡੋ ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ। ਨੇਸਟਡ ਮੋਡਲ ਸਮਰਥਿਤ ਨਹੀਂ ਹਨ ਕਿਉਂਕਿ ਅਸੀਂ ਉਹਨਾਂ ਨੂੰ ਮਾੜੇ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਮੰਨਦੇ ਹਾਂ।
ਮਾਡਲਸ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ position: fixed
, ਜੋ ਕਈ ਵਾਰ ਇਸਦੀ ਰੈਂਡਰਿੰਗ ਬਾਰੇ ਥੋੜਾ ਖਾਸ ਹੋ ਸਕਦਾ ਹੈ। ਜਦੋਂ ਵੀ ਸੰਭਵ ਹੋਵੇ, ਦੂਜੇ ਤੱਤਾਂ ਤੋਂ ਸੰਭਾਵੀ ਦਖਲ ਤੋਂ ਬਚਣ ਲਈ ਆਪਣੇ ਮਾਡਲ HTML ਨੂੰ ਉੱਚ-ਪੱਧਰੀ ਸਥਿਤੀ ਵਿੱਚ ਰੱਖੋ। ਤੁਹਾਨੂੰ ਸੰਭਾਵਤ ਤੌਰ 'ਤੇ .modal
ਕਿਸੇ ਹੋਰ ਸਥਿਰ ਤੱਤ ਦੇ ਅੰਦਰ ਆਲ੍ਹਣਾ ਬਣਾਉਣ ਵੇਲੇ ਸਮੱਸਿਆਵਾਂ ਦਾ ਸਾਹਮਣਾ ਕਰਨਾ ਪਵੇਗਾ।
ਇੱਕ ਵਾਰ ਫਿਰ, ਦੇ ਕਾਰਨ position: fixed
, ਮੋਬਾਈਲ ਡਿਵਾਈਸਾਂ 'ਤੇ ਮਾਡਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਨਾਲ ਕੁਝ ਚੇਤਾਵਨੀਆਂ ਹਨ. ਵੇਰਵਿਆਂ ਲਈ ਸਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਸਹਾਇਤਾ ਦਸਤਾਵੇਜ਼ ਵੇਖੋ ।
HTML5 ਆਪਣੇ ਅਰਥ ਵਿਗਿਆਨ ਨੂੰ ਕਿਵੇਂ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ, HTML autofocus
ਗੁਣ ਦਾ ਬੂਟਸਟਰੈਪ ਮਾਡਲਾਂ ਵਿੱਚ ਕੋਈ ਪ੍ਰਭਾਵ ਨਹੀਂ ਹੁੰਦਾ ਹੈ। ਉਸੇ ਪ੍ਰਭਾਵ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ, ਕੁਝ ਕਸਟਮ JavaScript ਦੀ ਵਰਤੋਂ ਕਰੋ:
ਕਾਪੀ ਕਰੋ
$ ( '#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>
ਕੀ ਤੁਹਾਡੇ ਕੋਲ ਬਟਨਾਂ ਦਾ ਇੱਕ ਸਮੂਹ ਹੈ ਜੋ ਥੋੜੀ ਵੱਖਰੀ ਸਮੱਗਰੀ ਦੇ ਨਾਲ ਇੱਕੋ ਮਾਡਲ ਨੂੰ ਚਾਲੂ ਕਰਦੇ ਹਨ? ਮਾਡਲ ਦੀ ਸਮੱਗਰੀ ਨੂੰ ਵੱਖ-ਵੱਖ ਕਰਨ ਲਈ HTML ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ (ਸੰਭਵ ਤੌਰ ' ਤੇ jQuery ਰਾਹੀਂ ) ਦੀ ਵਰਤੋਂ ਕਰੋ event.relatedTarget
ਅਤੇ ਇਸ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ ਕਿ ਕਿਹੜਾ ਬਟਨ ਕਲਿੱਕ ਕੀਤਾ ਗਿਆ ਸੀ।data-*
ਹੇਠਾਂ HTML ਅਤੇ JavaScript ਉਦਾਹਰਨ ਦੇ ਬਾਅਦ ਇੱਕ ਲਾਈਵ ਡੈਮੋ ਹੈ। ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ, 'ਤੇ ਵੇਰਵਿਆਂ ਲਈ ਮਾਡਲ ਇਵੈਂਟ ਦਸਤਾਵੇਜ਼ 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"
ਆਪ ਨੂੰ ਜੋੜਨਾ ਯਕੀਨੀ ਬਣਾਓ । ਇਸ ਤੋਂ ਇਲਾਵਾ, ਤੁਸੀਂ on ਨਾਲ ਆਪਣੇ ਮਾਡਲ ਡਾਇਲਾਗ ਦਾ ਵੇਰਵਾ ਦੇ ਸਕਦੇ ਹੋ ।aria-labelledby="..."
.modal
role="document"
.modal-dialog
aria-describedby
.modal
YouTube ਵੀਡੀਓਜ਼ ਨੂੰ ਏਮਬੈਡ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ
ਮੋਡਲਾਂ ਵਿੱਚ YouTube ਵਿਡੀਓਜ਼ ਨੂੰ ਏਮਬੈਡ ਕਰਨ ਲਈ ਵਾਧੂ JavaScript ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਨਾ ਕਿ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਪਲੇਬੈਕ ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਬੰਦ ਕਰਨ ਲਈ। ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ ਇਹ ਮਦਦਗਾਰ ਸਟੈਕ ਓਵਰਫਲੋ ਪੋਸਟ ਦੇਖੋ ।
ਮਾਡਲਾਂ ਦੇ ਦੋ ਵਿਕਲਪਿਕ ਆਕਾਰ ਹੁੰਦੇ ਹਨ, ਜੋ ਮੋਡੀਫਾਇਰ ਕਲਾਸਾਂ ਰਾਹੀਂ ਉਪਲਬਧ ਹੁੰਦੇ ਹਨ ਜੋ ਕਿ ਇੱਕ 'ਤੇ ਰੱਖੇ ਜਾਣ ਲਈ ਹਨ .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>
ਮਾਡਲ ਪਲੱਗਇਨ ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ 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>
myModal
JavaScript ਦੀ ਇੱਕ ਲਾਈਨ ਨਾਲ id ਦੇ ਨਾਲ ਇੱਕ ਮਾਡਲ ਨੂੰ ਕਾਲ ਕਰੋ :
ਕਾਪੀ ਕਰੋ
$ ( '#myModal' ). modal ( options )
ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-
, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-backdrop=""
।
ਨਾਮ
ਟਾਈਪ ਕਰੋ
ਡਿਫਾਲਟ
ਵਰਣਨ
ਪਿਛੋਕੜ
ਬੂਲੀਅਨ ਜਾਂ ਸਤਰ'static'
ਸੱਚ ਹੈ
ਇੱਕ ਮਾਡਲ-ਬੈਕਡ੍ਰੌਪ ਤੱਤ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ। ਵਿਕਲਪਿਕ ਤੌਰ 'ਤੇ, static
ਇੱਕ ਬੈਕਡ੍ਰੌਪ ਲਈ ਨਿਸ਼ਚਿਤ ਕਰੋ ਜੋ ਕਲਿੱਕ ਕਰਨ 'ਤੇ ਮਾਡਲ ਨੂੰ ਬੰਦ ਨਹੀਂ ਕਰਦਾ ਹੈ।
ਕੀਬੋਰਡ
ਬੁਲੀਅਨ
ਸੱਚ ਹੈ
ਐਸਕੇਪ ਕੁੰਜੀ ਦਬਾਉਣ 'ਤੇ ਮਾਡਲ ਨੂੰ ਬੰਦ ਕਰ ਦਿੰਦਾ ਹੈ
ਫੋਕਸ
ਬੁਲੀਅਨ
ਸੱਚ ਹੈ
ਸ਼ੁਰੂਆਤੀ ਹੋਣ 'ਤੇ ਮਾਡਲ 'ਤੇ ਫੋਕਸ ਕਰਦਾ ਹੈ।
ਦਿਖਾਓ
ਬੁਲੀਅਨ
ਸੱਚ ਹੈ
ਸ਼ੁਰੂਆਤੀ ਹੋਣ 'ਤੇ ਮਾਡਲ ਦਿਖਾਉਂਦਾ ਹੈ।
ਅਸਿੰਕ੍ਰੋਨਸ ਵਿਧੀਆਂ ਅਤੇ ਪਰਿਵਰਤਨ
ਸਾਰੀਆਂ API ਵਿਧੀਆਂ ਅਸਿੰਕ੍ਰੋਨਸ ਹਨ ਅਤੇ ਇੱਕ ਤਬਦੀਲੀ ਸ਼ੁਰੂ ਕਰਦੀਆਂ ਹਨ । ਪਰਿਵਰਤਨ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹੀ ਉਹ ਕਾਲਰ ਕੋਲ ਵਾਪਸ ਆਉਂਦੇ ਹਨ ਪਰ ਇਸ ਦੇ ਖਤਮ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ । ਇਸ ਤੋਂ ਇਲਾਵਾ, ਪਰਿਵਰਤਨ ਕਰਨ ਵਾਲੇ ਹਿੱਸੇ 'ਤੇ ਇੱਕ ਢੰਗ ਕਾਲ ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਜਾਵੇਗਾ ।
ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ ਸਾਡੇ JavaScript ਦਸਤਾਵੇਜ਼ ਵੇਖੋ।
ਤੁਹਾਡੀ ਸਮੱਗਰੀ ਨੂੰ ਇੱਕ ਮਾਡਲ ਵਜੋਂ ਸਰਗਰਮ ਕਰਦਾ ਹੈ। ਇੱਕ ਵਿਕਲਪਿਕ ਵਿਕਲਪ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ 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.bs.modal
ਇਹ ਘਟਨਾ ਤੁਰੰਤ ਫਾਇਰ ਹੋ ਜਾਂਦੀ ਹੈ ਜਦੋਂ show
ਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। ਜੇਕਰ ਇੱਕ ਕਲਿੱਕ ਕਾਰਨ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਕਲਿੱਕ ਕੀਤਾ ਗਿਆ ਤੱਤ relatedTarget
ਘਟਨਾ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਵਜੋਂ ਉਪਲਬਧ ਹੁੰਦਾ ਹੈ।
ਦਿਖਾਇਆ ਗਿਆ.bs.modal
ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਮਾਡਲ ਨੂੰ ਉਪਭੋਗਤਾ ਲਈ ਦ੍ਰਿਸ਼ਮਾਨ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)। ਜੇਕਰ ਇੱਕ ਕਲਿੱਕ ਕਾਰਨ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਕਲਿੱਕ ਕੀਤਾ ਗਿਆ ਤੱਤ relatedTarget
ਘਟਨਾ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਵਜੋਂ ਉਪਲਬਧ ਹੁੰਦਾ ਹੈ।
hide.bs.modal
ਇਸ ਇਵੈਂਟ ਨੂੰ ਤੁਰੰਤ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜਦੋਂ hide
ਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ।
hidden.bs.modal
ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਮਾਡਲ ਉਪਭੋਗਤਾ ਤੋਂ ਛੁਪਾਉਣਾ ਪੂਰਾ ਕਰ ਲੈਂਦਾ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)।
ਕਾਪੀ ਕਰੋ
$ ( '#myModal' ). on ( 'hidden.bs.modal' , function ( e ) {
// do something...
})