Sourceମୋଡାଲ୍
ଲାଇଟବକ୍ସ, ଉପଭୋକ୍ତା ବିଜ୍ଞପ୍ତି କିମ୍ବା ସଂପୂର୍ଣ୍ଣ କଷ୍ଟମ ବିଷୟବସ୍ତୁ ପାଇଁ ଆପଣଙ୍କ ସାଇଟରେ ସଂଳାପ ଯୋଡିବା ପାଇଁ ବୁଟଷ୍ଟ୍ରାପର ଜାଭାସ୍କ୍ରିପ୍ଟ ମୋଡାଲ ପ୍ଲଗଇନ ବ୍ୟବହାର କରନ୍ତୁ |
ବୁଟଷ୍ଟ୍ରାପ୍ ର ମୋଡାଲ୍ ଉପାଦାନ ସହିତ ଆରମ୍ଭ କରିବା ପୂର୍ବରୁ, ଆମର ମେନୁ ବିକଳ୍ପଗୁଡ଼ିକ ନିକଟରେ ପରିବର୍ତ୍ତନ ହୋଇଥିବାରୁ ନିମ୍ନଲିଖିତ ପ read ିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |
ମୋଡାଲଗୁଡିକ HTML, CSS, ଏବଂ JavaScript ସହିତ ନିର୍ମିତ | ସେମାନେ ଡକ୍ୟୁମେଣ୍ଟ୍ ର ଅନ୍ୟ ସମସ୍ତ ଜିନିଷ ଉପରେ ଅବସ୍ଥାନ କରନ୍ତି ଏବଂ ସ୍କ୍ରୋଲ୍ ଅପସାରଣ କରନ୍ତି <body>
ଯାହା ଦ୍ mod ାରା ମୋଡାଲ୍ ବିଷୟବସ୍ତୁ ସ୍କ୍ରୋଲ୍ କରେ |
ମୋଡାଲ୍ “ବ୍ୟାକଡ୍ରପ୍” ଉପରେ କ୍ଲିକ୍ କରିବା ଦ୍ୱାରା ସ୍ୱୟଂଚାଳିତ ଭାବରେ ମୋଡାଲ୍ ବନ୍ଦ ହୋଇଯିବ |
ବୁଟଷ୍ଟ୍ରାପ୍ କେବଳ ଗୋଟିଏ ମୋଡାଲ୍ ୱିଣ୍ଡୋକୁ ସମର୍ଥନ କରେ | ନେଷ୍ଟେଡ୍ ମୋଡାଲ୍ ସମର୍ଥିତ ନୁହେଁ ଯେହେତୁ ଆମେ ସେମାନଙ୍କୁ ଖରାପ ଉପଭୋକ୍ତା ଅଭିଜ୍ଞତା ବୋଲି ବିଶ୍ believe ାସ କରୁ |
ମୋଡାଲ୍ ବ୍ୟବହାର position: fixed
, ଯାହା ବେଳେବେଳେ ଏହାର ରେଣ୍ଡରିଂ ବିଷୟରେ ଟିକେ ନିର୍ଦ୍ଦିଷ୍ଟ ହୋଇପାରେ | ଯେତେବେଳେ ସମ୍ଭବ, ଅନ୍ୟ ଉପାଦାନଗୁଡିକରୁ ସମ୍ଭାବ୍ୟ ହସ୍ତକ୍ଷେପକୁ ଏଡାଇବା ପାଇଁ ଆପଣଙ୍କର ମୋଡାଲ୍ HTML କୁ ଏକ ଉଚ୍ଚ ସ୍ତରୀୟ ସ୍ଥିତିରେ ରଖନ୍ତୁ | .modal
ଅନ୍ୟ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ଉପାଦାନ ମଧ୍ୟରେ ବସା ବାନ୍ଧିବାବେଳେ ତୁମେ ସମ୍ଭବତ issues ସମସ୍ୟାଗୁଡ଼ିକରେ ଦ run ଡିବ |
ପୁନର୍ବାର, ହେତୁ position: fixed
, ମୋବାଇଲ୍ ଡିଭାଇସରେ ମୋଡାଲ୍ ବ୍ୟବହାର କରିବା ସହିତ କିଛି ଗୁମ୍ଫା ଅଛି | ବିବରଣୀ ପାଇଁ ଆମର ବ୍ରାଉଜର୍ ସପୋର୍ଟ ଡକସ୍ ଦେଖନ୍ତୁ |
HTML5 ଏହାର ଅର୍ଥକୁ କିପରି ବ୍ୟାଖ୍ୟା କରେ, ବୁଟଷ୍ଟ୍ରାପ୍autofocus
ମୋଡାଲରେ HTML ଗୁଣର କ effect ଣସି ପ୍ରଭାବ ନାହିଁ | ସମାନ ପ୍ରଭାବ ହାସଲ କରିବାକୁ, କିଛି କଷ୍ଟମ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ବ୍ୟବହାର କରନ୍ତୁ:
କପି କରନ୍ତୁ |
$ ( '#myModal' ). on ( 'shown.bs.modal' , function () {
$ ( '#myInput' ). trigger ( 'focus' )
})
ଡେମୋ ଏବଂ ବ୍ୟବହାର ନିର୍ଦ୍ଦେଶାବଳୀ ପାଇଁ ପ reading ଼ନ୍ତୁ |
ନିମ୍ନରେ ଏକ ଷ୍ଟାଟିକ୍ ମୋଡାଲ୍ ଉଦାହରଣ ଅଛି (ଏହାର ଅର୍ଥ 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>
ଲମ୍ବା ବିଷୟବସ୍ତୁ ସ୍କ୍ରୋଲ୍ କରିବା |
ଯେତେବେଳେ ଉପଭୋକ୍ତାଙ୍କର ଭ୍ୟୁପୋର୍ଟ୍ କିମ୍ବା ଡିଭାଇସ୍ ପାଇଁ ମୋଡାଲ୍ ବହୁତ ଲମ୍ବା ହୋଇଯାଏ, ସେମାନେ ନିଜେ ପୃଷ୍ଠାଠାରୁ ସ୍ independent ାଧୀନ ସ୍କ୍ରୋଲ୍ କରନ୍ତି | ଆମେ କ’ଣ କହିବାକୁ ନିମ୍ନରେ ଡେମୋ ଚେଷ୍ଟା କରନ୍ତୁ |
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>
ଆବଶ୍ୟକତା ଅନୁଯାୟୀ ଟୁଲ୍ ଟିପ୍ସ ଏବଂ ପପୋଭରଗୁଡିକ ମୋଡାଲ୍ ମଧ୍ୟରେ ରଖାଯାଇପାରିବ | ଯେତେବେଳେ ମୋଡାଲ୍ ବନ୍ଦ ହୋଇଯାଏ, ଭିତରେ ଥିବା ଯେକ tool ଣସି ଟୁଲ୍ ଟିପ୍ସ ଏବଂ ପପୋଭର୍ ମଧ୍ୟ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ବରଖାସ୍ତ ହୁଏ |
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
| ତାପରେ, ଆପଣ ଅନ୍ୟ ଯେକ anywhere ଣସି ସ୍ଥାନରେ ସାଧାରଣ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ କ୍ଲାସ୍ ବ୍ୟବହାର କରନ୍ତୁ |
.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-*
ସମ୍ଭବତ j jQuery ମାଧ୍ୟମରେ ) ବ୍ୟବହାର କରନ୍ତୁ |
ନିମ୍ନରେ HTML ଏବଂ ଜାଭାସ୍କ୍ରିପ୍ଟ ଦ୍ୱାରା ଏକ ଲାଇଭ୍ ଡେମୋ ଅଛି | ଅଧିକ ସୂଚନା ପାଇଁ, ମୋଡାଲ୍ ଇଭେଣ୍ଟ ଡକସ୍ ବିଷୟରେ ସବିଶେଷ ତଥ୍ୟ ପ read ନ୍ତୁ 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')
ଏକ ସ୍କ୍ରୋଲ୍ ବାର୍ ଦୃଶ୍ୟମାନ ହେଲେ ଆପଣ ମୋଡାଲର ସ୍ଥିତିକୁ ପୁନ j ସଜାଡିବାକୁ ଡାକିବା ଉଚିତ |
ଯୋଡିବାକୁ ନିଶ୍ଚିତ କରନ୍ତୁ role="dialog"
ଏବଂ aria-labelledby="..."
, ମୋଡାଲ୍ ଟାଇଟଲ୍, ରେଫରେନ୍ସ .modal
ଏବଂ role="document"
ନିଜେ .modal-dialog
| aria-describedby
ଅତିରିକ୍ତ ଭାବରେ, ଆପଣ ଆପଣଙ୍କର ମୋଡାଲ୍ ସଂଳାପର ଏକ ବର୍ଣ୍ଣନା ଦେଇପାରନ୍ତି .modal
|
ୟୁଟ୍ୟୁବ୍ ଭିଡିଓଗୁଡିକ ଏମ୍ବେଡ୍ କରୁଛି |
ୟୁଟ୍ୟୁବ୍ ଭିଡିଓଗୁଡିକ ମୋଡାଲରେ ଏମ୍ବେଡ୍ କରିବା ପାଇଁ ଅତିରିକ୍ତ ଜାଭାସ୍କ୍ରିପ୍ଟ ଆବଶ୍ୟକ କରେ ବୁଟଷ୍ଟ୍ରାପରେ ନୁହେଁ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ପ୍ଲେକ୍ ବନ୍ଦ କରିବା ଏବଂ ଅଧିକ | ଅଧିକ ସୂଚନା ପାଇଁ ଏହି ସହାୟକ ଷ୍ଟାକ ଓଭରଫ୍ଲୋ ପୋଷ୍ଟ ଦେଖନ୍ତୁ |
ମୋଡାଲଗୁଡିକର ଦୁଇଟି ବ al କଳ୍ପିକ ଆକାର ଅଛି, a ଉପରେ ରଖିବାକୁ ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ମାଧ୍ୟମରେ ଉପଲବ୍ଧ .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'
ସତ
ଏକ ମୋଡାଲ୍-ବ୍ୟାକଡ୍ରପ୍ ଉପାଦାନ ଅନ୍ତର୍ଭୂକ୍ତ କରେ | ବ ly କଳ୍ପିକ ଭାବରେ, ଏକ ପୃଷ୍ଠଭୂମି ପାଇଁ ନିର୍ଦ୍ଦିଷ୍ଟ static
କରନ୍ତୁ ଯାହା କ୍ଲିକ୍ ଉପରେ ମୋଡାଲ୍ ବନ୍ଦ କରେ ନାହିଁ |
କୀବୋର୍ଡ୍
ବୁଲିଅନ୍
ସତ
ଏସ୍କେପ୍ କୀ ଦବାଇଲେ ମୋଡାଲ୍ ବନ୍ଦ କରେ |
ଧ୍ୟାନ ଦିଅନ୍ତୁ |
ବୁଲିଅନ୍
ସତ
ପ୍ରାରମ୍ଭ ହେବା ସମୟରେ ମୋଡାଲ ଉପରେ ଧ୍ୟାନ ରଖେ |
ଦେଖାନ୍ତୁ |
ବୁଲିଅନ୍
ସତ
ପ୍ରାରମ୍ଭ ହେବା ସମୟରେ ମୋଡାଲ୍ ଦେଖାଏ |
ଅସନ୍ତୁଳିତ ପଦ୍ଧତି ଏବଂ ସ୍ଥାନାନ୍ତରଣ |
ସମସ୍ତ API ପଦ୍ଧତିଗୁଡିକ ଅସନ୍ତୁଳିତ ଏବଂ ଏକ ପରିବର୍ତ୍ତନ ଆରମ୍ଭ କରନ୍ତି | ସଂକ୍ରମଣ ଆରମ୍ଭ ହେବା ମାତ୍ରେ ସେମାନେ କଲର୍ ନିକଟକୁ ଫେରିଯାଆନ୍ତି କିନ୍ତୁ ଏହା ଶେଷ ହେବା ପୂର୍ବରୁ | ଏହା ସହିତ, ଏକ ପରିବର୍ତ୍ତନକାରୀ ଉପାଦାନ ଉପରେ ଏକ ପଦ୍ଧତି କଲ୍ କୁ ଅଣଦେଖା କରାଯିବ |
ଅଧିକ ସୂଚନା ପାଇଁ ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ଦେଖନ୍ତୁ |
ତୁମର ବିଷୟବସ୍ତୁକୁ ଏକ ମୋଡାଲ୍ ଭାବରେ ସକ୍ରିୟ କରେ | ଏକ ଇଚ୍ଛାଧୀନ ବିକଳ୍ପ ଗ୍ରହଣ କରେ 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' )
ଖୋଲା ଥିବାବେଳେ ମୋଡାଲର ଉଚ୍ଚତା ପରିବର୍ତ୍ତନ ହେଲେ ମୋଡାଲର ସ୍ଥିତିକୁ ମାନୁଆଲ ଭାବରେ ପୁନ j ସଜାଡନ୍ତୁ (ଅର୍ଥାତ୍ ଯଦି ଏକ ସ୍କ୍ରୋଲ୍ ବାର୍ ଦେଖାଯାଏ) |
କପି କରନ୍ତୁ |
$ ( '#myModal' ). modal ( 'handleUpdate' )
ଏକ ଉପାଦାନର ମୋଡାଲ୍ ନଷ୍ଟ କରେ |
ବୁଟଷ୍ଟ୍ରାପ୍ ର ମୋଡାଲ୍ କ୍ଲାସ୍ ମୋଡାଲ୍ କାର୍ଯ୍ୟକାରିତା ପାଇଁ ହୁକିଙ୍ଗ୍ ପାଇଁ କିଛି ଇଭେଣ୍ଟକୁ ପ୍ରକାଶ କରେ | ସମସ୍ତ ମୋଡାଲ୍ ଇଭେଣ୍ଟଗୁଡିକ ମୋଡାଲ୍ ନିଜେ (ଅର୍ଥାତ୍) ରେ ଗୁଳି କରାଯାଇଥାଏ <div class="modal">
|
ଇଭେଣ୍ଟ ପ୍ରକାର |
ବର୍ଣ୍ଣନା
show.bs.modal
show
ଉଦାହରଣ ପଦ୍ଧତି ଡାକିବା ପରେ ଏହି ଘଟଣା ତୁରନ୍ତ ନିଆଁ ଲାଗେ | ଯଦି ଏକ କ୍ଲିକ୍ ଦ୍ୱାରା ଘଟିଥାଏ, କ୍ଲିକ୍ ହୋଇଥିବା ଉପାଦାନ relatedTarget
ଇଭେଣ୍ଟର ସମ୍ପତ୍ତି ଭାବରେ ଉପଲବ୍ଧ |
show.bs.modal
ଯେତେବେଳେ ମୋଡାଲ୍ ଉପଭୋକ୍ତାଙ୍କୁ ଦୃଶ୍ୟମାନ କରାଗଲା (CSS ସ୍ଥାନାନ୍ତରଣ ସମ୍ପୂର୍ଣ୍ଣ ହେବା ପର୍ଯ୍ୟନ୍ତ ଅପେକ୍ଷା କରିବ) ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଏ | ଯଦି ଏକ କ୍ଲିକ୍ ଦ୍ୱାରା ଘଟିଥାଏ, କ୍ଲିକ୍ ହୋଇଥିବା ଉପାଦାନ relatedTarget
ଇଭେଣ୍ଟର ସମ୍ପତ୍ତି ଭାବରେ ଉପଲବ୍ଧ |
hide.bs.modal
hide
ଉଦାହରଣ ପଦ୍ଧତି ଡକାଯିବା ପରେ ଏହି ଇଭେଣ୍ଟ ତୁରନ୍ତ ବରଖାସ୍ତ ହୁଏ |
hidden.bs.modal
ଯେତେବେଳେ ମୋଡାଲ୍ ଉପଭୋକ୍ତା ଠାରୁ ଲୁକ୍କାୟିତ ହୋଇସାରିଛି (CSS ସ୍ଥାନାନ୍ତରଣ ସମ୍ପୂର୍ଣ୍ଣ ହେବା ପର୍ଯ୍ୟନ୍ତ ଅପେକ୍ଷା କରିବ) ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଏ |
କପି କରନ୍ତୁ |
$ ( '#myModal' ). on ( 'hidden.bs.modal' , function ( e ) {
// do something...
})