ମୋଡାଲ୍
ଲାଇଟବକ୍ସ, ଉପଭୋକ୍ତା ବିଜ୍ଞପ୍ତି କିମ୍ବା ସଂପୂର୍ଣ୍ଣ କଷ୍ଟମ ବିଷୟବସ୍ତୁ ପାଇଁ ଆପଣଙ୍କ ସାଇଟରେ ସଂଳାପ ଯୋଡିବା ପାଇଁ ବୁଟଷ୍ଟ୍ରାପର ଜାଭାସ୍କ୍ରିପ୍ଟ ମୋଡାଲ ପ୍ଲଗଇନ ବ୍ୟବହାର କରନ୍ତୁ |
ଏହା କିପରି କାମ କରେ |
ବୁଟଷ୍ଟ୍ରାପ୍ ର ମୋଡାଲ୍ ଉପାଦାନ ସହିତ ଆରମ୍ଭ କରିବା ପୂର୍ବରୁ, ଆମର ମେନୁ ବିକଳ୍ପଗୁଡ଼ିକ ନିକଟରେ ପରିବର୍ତ୍ତନ ହୋଇଥିବାରୁ ନିମ୍ନଲିଖିତ ପ read ିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ |
- ମୋଡାଲଗୁଡିକ HTML, CSS, ଏବଂ JavaScript ସହିତ ନିର୍ମିତ | ସେମାନେ ଡକ୍ୟୁମେଣ୍ଟ୍ ର ଅନ୍ୟ ସମସ୍ତ ଜିନିଷ ଉପରେ ଅବସ୍ଥାନ କରନ୍ତି ଏବଂ ସ୍କ୍ରୋଲ୍ ଅପସାରଣ କରନ୍ତି
<body>
ଯାହା ଦ୍ mod ାରା ମୋଡାଲ୍ ବିଷୟବସ୍ତୁ ସ୍କ୍ରୋଲ୍ କରେ | - ମୋଡାଲ୍ “ବ୍ୟାକଡ୍ରପ୍” ଉପରେ କ୍ଲିକ୍ କରିବା ଦ୍ୱାରା ସ୍ୱୟଂଚାଳିତ ଭାବରେ ମୋଡାଲ୍ ବନ୍ଦ ହୋଇଯିବ |
- ବୁଟଷ୍ଟ୍ରାପ୍ କେବଳ ଗୋଟିଏ ମୋଡାଲ୍ ୱିଣ୍ଡୋକୁ ସମର୍ଥନ କରେ | ନେଷ୍ଟେଡ୍ ମୋଡାଲ୍ ସମର୍ଥିତ ନୁହେଁ ଯେହେତୁ ଆମେ ସେମାନଙ୍କୁ ଖରାପ ଉପଭୋକ୍ତା ଅଭିଜ୍ଞତା ବୋଲି ବିଶ୍ believe ାସ କରୁ |
- ମୋଡାଲ୍ ବ୍ୟବହାର
position: fixed
, ଯାହା ବେଳେବେଳେ ଏହାର ରେଣ୍ଡରିଂ ବିଷୟରେ ଟିକେ ନିର୍ଦ୍ଦିଷ୍ଟ ହୋଇପାରେ | ଯେତେବେଳେ ସମ୍ଭବ, ଅନ୍ୟ ଉପାଦାନଗୁଡିକରୁ ସମ୍ଭାବ୍ୟ ହସ୍ତକ୍ଷେପକୁ ଏଡାଇବା ପାଇଁ ଆପଣଙ୍କର ମୋଡାଲ୍ HTML କୁ ଏକ ଉଚ୍ଚ ସ୍ତରୀୟ ସ୍ଥିତିରେ ରଖନ୍ତୁ |.modal
ଅନ୍ୟ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ଉପାଦାନ ମଧ୍ୟରେ ବସା ବାନ୍ଧିବାବେଳେ ତୁମେ ସମ୍ଭବତ issues ସମସ୍ୟାଗୁଡ଼ିକରେ ଦ run ଡିବ | - ପୁନର୍ବାର, ହେତୁ
position: fixed
, ମୋବାଇଲ୍ ଡିଭାଇସରେ ମୋଡାଲ୍ ବ୍ୟବହାର କରିବା ସହିତ କିଛି ଗୁମ୍ଫା ଅଛି | ବିବରଣୀ ପାଇଁ ଆମର ବ୍ରାଉଜର୍ ସପୋର୍ଟ ଡକସ୍ ଦେଖନ୍ତୁ | - HTML5 ଏହାର ଅର୍ଥକୁ କିପରି ବ୍ୟାଖ୍ୟା କରେ, ବୁଟଷ୍ଟ୍ରାପ୍
autofocus
ମୋଡାଲରେ HTML ଗୁଣର କ effect ଣସି ପ୍ରଭାବ ନାହିଁ | ସମାନ ପ୍ରଭାବ ହାସଲ କରିବାକୁ, କିଛି କଷ୍ଟମ୍ ଜାଭାସ୍କ୍ରିପ୍ଟ ବ୍ୟବହାର କରନ୍ତୁ:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
ମିଡିଆ ଜିଜ୍ଞାସା ଉପରେ ନିର୍ଭରଶୀଳ | ଆମର ଆକ୍ସେସିବିଲିଟି ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ର ହ୍ରାସ ହୋଇଥିବା ଗତି ବିଭାଗ ଦେଖନ୍ତୁ
|
ଡେମୋ ଏବଂ ବ୍ୟବହାର ନିର୍ଦ୍ଦେଶାବଳୀ ପାଇଁ ପ reading ଼ନ୍ତୁ |
ଉଦାହରଣଗୁଡିକ
ମୋଡାଲ୍ ଉପାଦାନଗୁଡ଼ିକ |
ନିମ୍ନରେ ଏକ ଷ୍ଟାଟିକ୍ ମୋଡାଲ୍ ଉଦାହରଣ ଅଛି (ଏହାର ଅର୍ଥ 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>
ଲମ୍ବା ବିଷୟବସ୍ତୁ ସ୍କ୍ରୋଲ୍ କରିବା |
ଯେତେବେଳେ ଉପଭୋକ୍ତାଙ୍କର ଭ୍ୟୁପୋର୍ଟ୍ କିମ୍ବା ଡିଭାଇସ୍ ପାଇଁ ମୋଡାଲ୍ ବହୁତ ଲମ୍ବା ହୋଇଯାଏ, ସେମାନେ ନିଜେ ପୃଷ୍ଠାଠାରୁ ସ୍ independent ାଧୀନ ସ୍କ୍ରୋଲ୍ କରନ୍ତି | ଆମେ କ’ଣ କହିବାକୁ ନିମ୍ନରେ ଡେମୋ ଚେଷ୍ଟା କରନ୍ତୁ |
ଆପଣ ଏକ ସ୍କ୍ରୋଲେବଲ୍ ମୋଡାଲ୍ ମଧ୍ୟ ସୃଷ୍ଟି କରିପାରିବେ ଯାହା ଯୋଗ କରି ମୋଡାଲ୍ ବଡି ସ୍କ୍ରୋଲ୍ କରିବାକୁ ଅନୁମତି .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>
ଟୁଲଟିପ୍ ଏବଂ ପପୋଭର୍ |
ଆବଶ୍ୟକତା ଅନୁଯାୟୀ ଟୁଲ୍ ଟିପ୍ସ ଏବଂ ପପୋଭରଗୁଡିକ ମୋଡାଲ୍ ମଧ୍ୟରେ ରଖାଯାଇପାରିବ | ଯେତେବେଳେ ମୋଡାଲ୍ ବନ୍ଦ ହୋଇଯାଏ, ଭିତରେ ଥିବା ଯେକ tool ଣସି ଟୁଲ୍ ଟିପ୍ସ ଏବଂ ପପୋଭର୍ ମଧ୍ୟ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ବରଖାସ୍ତ ହୁଏ |
<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
| ତାପରେ, ଆପଣ ଅନ୍ୟ ଯେକ anywhere ଣସି ସ୍ଥାନରେ ସାଧାରଣ ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ କ୍ଲାସ୍ ବ୍ୟବହାର କରନ୍ତୁ |
<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>
ବିଭିନ୍ନ ମୋଡାଲ୍ ବିଷୟବସ୍ତୁ |
ଏକ ଗୁଣ୍ଡ ବଟନ୍ ଅଛି ଯାହା ସମସ୍ତେ ସମାନ ମୋଡାଲକୁ ସାମାନ୍ୟ ଭିନ୍ନ ବିଷୟବସ୍ତୁ ସହିତ ଟ୍ରିଗର କରନ୍ତି? କେଉଁ ବଟନ୍ କ୍ଲିକ୍ ହୋଇଛି ତାହା ଉପରେ ନିର୍ଭର କରି ମୋଡାଲର ବିଷୟବସ୍ତୁକୁ ଭିନ୍ନ କରିବା ପାଇଁ HTML ଗୁଣ ବ୍ୟବହାର କରନ୍ତୁ event.relatedTarget
|data-bs-*
ନିମ୍ନରେ HTML ଏବଂ ଜାଭାସ୍କ୍ରିପ୍ଟ ଦ୍ୱାରା ଏକ ଲାଇଭ୍ ଡେମୋ ଅଛି | ଅଧିକ ସୂଚନା ପାଇଁ, ମୋଡାଲ୍ ଇଭେଣ୍ଟ ଡକସ୍ ବିଷୟରେ ସବିଶେଷ ତଥ୍ୟ ପ read ନ୍ତୁ 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
| ଉଦାହରଣ ସ୍ .ରୁପ, ଆପଣ ମୋଡାଲରେ ଏକ ଖୋଲା ଚିହ୍ନ ମଧ୍ୟରେ ଏକ ପାସୱାର୍ଡ ପୁନ et ସେଟ୍ ମୋଡାଲ୍ ଟୋଗଲ୍ କରିପାରିବେ | ଦୟାକରି ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଏକାଧିକ ମୋଡାଲ ଏକାସାଙ୍ଗରେ ଖୋଲା ହୋଇପାରିବ ନାହିଁ - ଏହି ପଦ୍ଧତି କେବଳ ଦୁଇଟି ପୃଥକ ମୋଡାଲ ମଧ୍ୟରେ ଟୋଗଲ୍ |
<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" data-bs-dismiss="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" data-bs-dismiss="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()
ଏକ ସ୍କ୍ରୋଲ୍ ବାର୍ ଦୃଶ୍ୟମାନ ହେଲେ ଆପଣ ମୋଡାଲର ସ୍ଥିତିକୁ ପୁନ j ସଜାଡିବାକୁ ଡାକିବା ଉଚିତ |
ଅଭିଗମ୍ୟତା
ଯୋଡିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ aria-labelledby="..."
, ମୋଡାଲ୍ ଟାଇଟଲ୍ ରେଫରେନ୍ସ କରି .modal
| aria-describedby
ଅତିରିକ୍ତ ଭାବରେ, ଆପଣ ଆପଣଙ୍କର ମୋଡାଲ୍ ସଂଳାପର ଏକ ବର୍ଣ୍ଣନା ଦେଇପାରନ୍ତି .modal
| ଧ୍ୟାନ ଦିଅନ୍ତୁ ଯେ ଆପଣ ଯୋଡିବା ଆବଶ୍ୟକ କରନ୍ତି ନାହିଁ role="dialog"
ଯେହେତୁ ଆମେ ଏହାକୁ ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ଯୋଡିଥାଉ |
ୟୁଟ୍ୟୁବ୍ ଭିଡିଓଗୁଡିକ ଏମ୍ବେଡ୍ କରୁଛି |
ୟୁଟ୍ୟୁବ୍ ଭିଡିଓଗୁଡିକ ମୋଡାଲରେ ଏମ୍ବେଡ୍ କରିବା ପାଇଁ ଅତିରିକ୍ତ ଜାଭାସ୍କ୍ରିପ୍ଟ ଆବଶ୍ୟକ କରେ ବୁଟଷ୍ଟ୍ରାପରେ ନୁହେଁ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ପ୍ଲେକ୍ ବନ୍ଦ କରିବା ଏବଂ ଅଧିକ | ଅଧିକ ସୂଚନା ପାଇଁ ଏହି ସହାୟକ ଷ୍ଟାକ ଓଭରଫ୍ଲୋ ପୋଷ୍ଟ ଦେଖନ୍ତୁ |
ବ tion କଳ୍ପିକ ଆକାର
ମୋଡାଲଗୁଡିକର ତିନୋଟି ବ al କଳ୍ପିକ ଆକାର ଅଛି, a ରେ ସ୍ଥାନିତ ହେବାକୁ ଥିବା ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ମାଧ୍ୟମରେ ଉପଲବ୍ଧ .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>
ଫୁଲ୍ ସ୍କ୍ରିନ୍ ମୋଡାଲ୍ |
ଅନ୍ୟ ଏକ ଓଭରବ୍ରିଡ୍ ହେଉଛି ଏକ ମୋଡାଲ୍ ପପ୍ ଅପ୍ କରିବାର ବିକଳ୍ପ ଯାହା ୟୁଜର୍ ଭ୍ୟୁପୋର୍ଟକୁ ଆବୃତ କରେ, ମୋଡିଫାୟର୍ କ୍ଲାସ୍ ମାଧ୍ୟମରେ ଉପଲବ୍ଧ ଯାହା a ଉପରେ ରଖାଯାଇଥାଏ .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
ମୋଡାଲ ବାହାରେ କ୍ଲିକ୍ କରିବା ସମୟରେ ପ୍ରଦର୍ଶିତ ମୋଡାଲଗୁଡ଼ିକୁ ଖାରଜ କରିବା ପାଇଁ ଏକ କ୍ଲିକ୍ କ୍ଷେତ୍ର ପ୍ରଦାନ କରିବାକୁ ଏକ ସୃଷ୍ଟି କରେ |
ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ମାଧ୍ୟମରେ |
ଜାଭାସ୍କ୍ରିପ୍ଟ ଲେଖିବା ବିନା ଏକ ମୋଡାଲ୍ ସକ୍ରିୟ କରନ୍ତୁ | ଟୋଗଲ୍ କରିବାକୁ ଏକ ନିର୍ଦ୍ଦିଷ୍ଟ ମୋଡାଲ୍ ସହିତ data-bs-toggle="modal"
ଏକ ବଟନ୍ ପରି ଏକ ନିୟନ୍ତ୍ରକ ଉପାଦାନ ଉପରେ ସେଟ୍ କରନ୍ତୁ |data-bs-target="#foo"
href="#foo"
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ |
ଜାଭାସ୍କ୍ରିପ୍ଟର ଗୋଟିଏ ଧାଡି ସହିତ ଏକ ମୋଡାଲ୍ ସୃଷ୍ଟି କରନ୍ତୁ:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
ବିକଳ୍ପଗୁଡ଼ିକ
ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ କିମ୍ବା ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ବିକଳ୍ପଗୁଡିକ ପାସ୍ ହୋଇପାରିବ | ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ ପାଇଁ, ଅପ୍ସନ୍ ନାମ ସହିତ data-bs-
ଯେପରି ଯୋଡନ୍ତୁ data-bs-backdrop=""
|
ନାମ | ଟାଇପ୍ କରନ୍ତୁ | | ଡିଫଲ୍ଟ | | ବର୍ଣ୍ଣନା |
---|---|---|---|
backdrop |
ବୁଲିଅନ୍ କିମ୍ବା ଷ୍ଟ୍ରିଙ୍ଗ୍ |'static' |
true |
ଏକ ମୋଡାଲ୍-ବ୍ୟାକଡ୍ରପ୍ ଉପାଦାନ ଅନ୍ତର୍ଭୂକ୍ତ କରେ | ବ ly କଳ୍ପିକ ଭାବରେ, ଏକ ପୃଷ୍ଠଭୂମି ପାଇଁ ନିର୍ଦ୍ଦିଷ୍ଟ static କରନ୍ତୁ ଯାହା କ୍ଲିକ୍ ଉପରେ ମୋଡାଲ୍ ବନ୍ଦ କରେ ନାହିଁ | |
keyboard |
ବୁଲିଅନ୍ | true |
ଏସ୍କେପ୍ କୀ ଦବାଇଲେ ମୋଡାଲ୍ ବନ୍ଦ କରେ | |
focus |
ବୁଲିଅନ୍ | true |
ପ୍ରାରମ୍ଭ ହେବା ସମୟରେ ମୋଡାଲ ଉପରେ ଧ୍ୟାନ ରଖେ | |
ପ୍ରଣାଳୀ
ଅସନ୍ତୁଳିତ ପଦ୍ଧତି ଏବଂ ସ୍ଥାନାନ୍ତରଣ |
ସମସ୍ତ API ପଦ୍ଧତିଗୁଡିକ ଅସନ୍ତୁଳିତ ଏବଂ ଏକ ପରିବର୍ତ୍ତନ ଆରମ୍ଭ କରନ୍ତି | ସଂକ୍ରମଣ ଆରମ୍ଭ ହେବା ମାତ୍ରେ ସେମାନେ କଲର୍ ନିକଟକୁ ଫେରିଯାଆନ୍ତି କିନ୍ତୁ ଏହା ଶେଷ ହେବା ପୂର୍ବରୁ | ଏହା ସହିତ, ଏକ ପରିବର୍ତ୍ତନକାରୀ ଉପାଦାନ ଉପରେ ଏକ ପଦ୍ଧତି କଲ୍ କୁ ଅଣଦେଖା କରାଯିବ |
ପାସ୍ ବିକଳ୍ପଗୁଡିକ |
ତୁମର ବିଷୟବସ୍ତୁକୁ ଏକ ମୋଡାଲ୍ ଭାବରେ ସକ୍ରିୟ କରେ | ଏକ ଇଚ୍ଛାଧୀନ ବିକଳ୍ପ ଗ୍ରହଣ କରେ object
|
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
ଟୋଗଲ୍ କରନ୍ତୁ |
ମାନୁଆଲ୍ ଏକ ମୋଡାଲ୍ ଟୋଗଲ୍ କରେ | ମୋଡାଲ୍ ପ୍ରକୃତରେ ଦେଖାଯିବା କିମ୍ବା ଲୁକ୍କାୟିତ ହେବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ shown.bs.modal
କିମ୍ବା hidden.bs.modal
ଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲର୍ କୁ ଫେରିଥାଏ |
myModal.toggle()
ଦେଖାନ୍ତୁ |
ମାନୁଆଲ୍ ଏକ ମୋଡାଲ୍ ଖୋଲିବ | ମୋଡାଲ୍ ପ୍ରକୃତରେ ଦେଖାଯିବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ shown.bs.modal
ଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲର୍ କୁ ଫେରିଥାଏ |
myModal.show()
ଆହୁରି ମଧ୍ୟ, ଆପଣ ଏକ DOM ଉପାଦାନକୁ ଏକ ଯୁକ୍ତି ଭାବରେ ପାସ୍ କରିପାରିବେ ଯାହା ମୋଡାଲ୍ ଇଭେଣ୍ଟଗୁଡିକରେ ( relatedTarget
ସମ୍ପତ୍ତି ଭାବରେ) ଗ୍ରହଣ କରାଯାଇପାରିବ |
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
ଲୁଚାନ୍ତୁ |
ମାନୁଆଲ୍ ଏକ ମୋଡାଲ୍ ଲୁଚାଇଥାଏ | ମୋଡାଲ୍ ପ୍ରକୃତରେ ଲୁକ୍କାୟିତ ହେବା ପୂର୍ବରୁ (ଅର୍ଥାତ୍ hidden.bs.modal
ଘଟଣା ଘଟିବା ପୂର୍ବରୁ) କଲର୍ କୁ ଫେରିଥାଏ |
myModal.hide()
ହ୍ୟାଣ୍ଡଲ୍ ଅପଡେଟ୍ |
ମୋଡାଲର ସ୍ଥିତିକୁ ମାନୁଆଲ ଭାବରେ ପୁନ j ସଜାଡନ୍ତୁ ଯଦି ଏହା ଖୋଲା ଥିବାବେଳେ ଏକ ମୋଡାଲର ଉଚ୍ଚତା ପରିବର୍ତ୍ତନ ହୁଏ (ଯେପରିକି ଏକ ସ୍କ୍ରୋଲ୍ ବାର୍ ଦେଖାଯାଏ) |
myModal.handleUpdate()
ନିଷ୍କାସନ କରନ୍ତୁ |
ଏକ ଉପାଦାନର ମୋଡାଲ୍ ନଷ୍ଟ କରେ | (DOM ଉପାଦାନରେ ଗଚ୍ଛିତ ତଥ୍ୟ ଅପସାରଣ କରେ)
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 ଉଦାହରଣ ପଦ୍ଧତି ଡାକିବା ପରେ ଏହି ଘଟଣା ତୁରନ୍ତ ନିଆଁ ଲାଗେ | ଯଦି ଏକ କ୍ଲିକ୍ ଦ୍ caused ାରା ଘଟିଥାଏ, କ୍ଲିକ୍ ହୋଇଥିବା ଉପାଦାନ relatedTarget ଇଭେଣ୍ଟର ସମ୍ପତ୍ତି ଭାବରେ ଉପଲବ୍ଧ | |
shown.bs.modal |
ଯେତେବେଳେ ମୋଡାଲ୍ ଉପଭୋକ୍ତାଙ୍କୁ ଦୃଶ୍ୟମାନ କରାଗଲା (CSS ସ୍ଥାନାନ୍ତରଣ ସମ୍ପୂର୍ଣ୍ଣ ହେବା ପର୍ଯ୍ୟନ୍ତ ଅପେକ୍ଷା କରିବ) ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଏ | ଯଦି ଏକ କ୍ଲିକ୍ ଦ୍ caused ାରା ଘଟିଥାଏ, କ୍ଲିକ୍ ହୋଇଥିବା ଉପାଦାନ relatedTarget ଇଭେଣ୍ଟର ସମ୍ପତ୍ତି ଭାବରେ ଉପଲବ୍ଧ | |
hide.bs.modal |
hide ଉଦାହରଣ ପଦ୍ଧତି ଡକାଯିବା ପରେ ଏହି ଇଭେଣ୍ଟ ତୁରନ୍ତ ବରଖାସ୍ତ ହୁଏ | |
hidden.bs.modal |
ଯେତେବେଳେ ମୋଡାଲ୍ ଉପଭୋକ୍ତା ଠାରୁ ଲୁକ୍କାୟିତ ହୋଇସାରିଛି (CSS ସ୍ଥାନାନ୍ତରଣ ସମ୍ପୂର୍ଣ୍ଣ ହେବା ପର୍ଯ୍ୟନ୍ତ ଅପେକ୍ଷା କରିବ) ଏହି ଇଭେଣ୍ଟକୁ ବରଖାସ୍ତ କରାଯାଏ | |
hidePrevented.bs.modal |
ଯେତେବେଳେ ମୋଡାଲ୍ ଦେଖାଯାଏ, ଏହାର ବ୍ୟାକଡ୍ରପ୍ ଥାଏ static ଏବଂ ମୋଡାଲ୍ ବାହାରେ ଏକ କ୍ଲିକ୍ କିମ୍ବା ଏକ ଏସ୍କେପ୍ କି ପ୍ରେସ୍ କୀବୋର୍ଡ୍ ଅପ୍ସନ୍ ସହିତ data-bs-keyboard ସେଟ୍ କରାଯାଇଥାଏ false | |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})