in English

ମୋଡାଲ୍

ଲାଇଟବକ୍ସ, ଉପଭୋକ୍ତା ବିଜ୍ଞପ୍ତି କିମ୍ବା ସଂପୂର୍ଣ୍ଣ କଷ୍ଟମ ବିଷୟବସ୍ତୁ ପାଇଁ ଆପଣଙ୍କ ସାଇଟରେ ସଂଳାପ ଯୋଡିବା ପାଇଁ ବୁଟଷ୍ଟ୍ରାପର ଜାଭାସ୍କ୍ରିପ୍ଟ ମୋଡାଲ ପ୍ଲଗଇନ ବ୍ୟବହାର କରନ୍ତୁ |

ଏହା କିପରି କାମ କରେ |

ବୁଟଷ୍ଟ୍ରାପ୍ ର ମୋଡାଲ୍ ଉପାଦାନ ସହିତ ଆରମ୍ଭ କରିବା ପୂର୍ବରୁ, ଆମର ମେନୁ ବିକଳ୍ପଗୁଡ଼ିକ ନିକଟରେ ପରିବର୍ତ୍ତନ ହୋଇଥିବାରୁ ନିମ୍ନଲିଖିତ ପ 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')
})

ଏହି ଉପାଦାନର ଆନିମେସନ୍ ପ୍ରଭାବ 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="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" 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="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="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-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="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">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-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 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.relatedTargetHTML ଗୁଣଗୁଡିକ ( data-*ସମ୍ଭବତ j jQuery ମାଧ୍ୟମରେ ) ବ୍ୟବହାର କରନ୍ତୁ |

ନିମ୍ନରେ HTML ଏବଂ ଜାଭାସ୍କ୍ରିପ୍ଟ ଦ୍ୱାରା ଏକ ଲାଇଭ୍ ଡେମୋ ଅଛି | ଅଧିକ ସୂଚନା ପାଇଁ, ମୋଡାଲ୍ ଇଭେଣ୍ଟ ଡକସ୍ ବିଷୟରେ ସବିଶେଷ ତଥ୍ୟ ପ read ନ୍ତୁ 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" 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="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)
})

ଆନିମେସନ୍ ପରିବର୍ତ୍ତନ କରନ୍ତୁ |

ଭେରିଏବଲ୍ ମୋଡାଲ୍ ଫେଡ୍-ଇନ୍ ଆନିମେସନ୍ ପୂର୍ବରୁ $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').modal('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>

ବ୍ୟବହାର

ଡାଟା ଆଟ୍ରିବ୍ୟୁଟ୍ କିମ୍ବା ଜାଭାସ୍କ୍ରିପ୍ଟ ମାଧ୍ୟମରେ ମୋଡାଲ୍ ପ୍ଲଗଇନ୍ ଚାହିଦା ଅନୁଯାୟୀ ତୁମର ଲୁକ୍କାୟିତ ବିଷୟବସ୍ତୁକୁ ଟୋଗଲ୍ କରେ | ଡିଫଲ୍ଟ ସ୍କ୍ରୋଲିଂ ଆଚରଣକୁ ନବଲିଖନ .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 ପଦ୍ଧତିଗୁଡିକ ଅସନ୍ତୁଳିତ ଏବଂ ଏକ ପରିବର୍ତ୍ତନ ଆରମ୍ଭ କରନ୍ତି | ସଂକ୍ରମଣ ଆରମ୍ଭ ହେବା ମାତ୍ରେ ସେମାନେ କଲର୍ ନିକଟକୁ ଫେରିଯାଆନ୍ତି କିନ୍ତୁ ଏହା ଶେଷ ହେବା ପୂର୍ବରୁ | ଏହା ସହିତ, ଏକ ପରିବର୍ତ୍ତନକାରୀ ଉପାଦାନ ଉପରେ ଏକ ପଦ୍ଧତି କଲ୍ କୁ ଅଣଦେଖା କରାଯିବ |

ଅଧିକ ସୂଚନା ପାଇଁ ଆମର ଜାଭାସ୍କ୍ରିପ୍ଟ ଡକ୍ୟୁମେଣ୍ଟେସନ୍ ଦେଖନ୍ତୁ |

.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')

ମୋଡାଲର ସ୍ଥିତିକୁ ମାନୁଆଲ ଭାବରେ ପୁନ j ସଜାଡନ୍ତୁ ଯଦି ଏହା ଖୋଲା ଥିବାବେଳେ ଏକ ମୋଡାଲର ଉଚ୍ଚତା ପରିବର୍ତ୍ତନ ହୁଏ (ଯେପରିକି ଏକ ସ୍କ୍ରୋଲ୍ ବାର୍ ଦେଖାଯାଏ) |

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

.modal('dispose')

ଏକ ଉପାଦାନର ମୋଡାଲ୍ ନଷ୍ଟ କରେ |

ଘଟଣା

ବୁଟଷ୍ଟ୍ରାପ୍ ର ମୋଡାଲ୍ କ୍ଲାସ୍ ମୋଡାଲ୍ କାର୍ଯ୍ୟକାରିତା ପାଇଁ ହୁକିଙ୍ଗ୍ ପାଇଁ କିଛି ଘଟଣା ପ୍ରକାଶ କରେ | ସମସ୍ତ ମୋଡାଲ୍ ଇଭେଣ୍ଟଗୁଡିକ ମୋଡାଲ୍ ନିଜେ (ଅର୍ଥାତ୍) ରେ ଗୁଳି କରାଯାଇଥାଏ <div class="modal">|

ଇଭେଣ୍ଟ ପ୍ରକାର | Description
show.bs.modal This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
shown.bs.modal This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
hide.bs.modal This event is fired immediately when the hide instance method has been called.
hidden.bs.modal This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
hidePrevented.bs.modal ଯେତେବେଳେ ମୋଡାଲ୍ ଦେଖାଯାଏ, ଏହାର ବ୍ୟାକଡ୍ରପ୍ ଥାଏ staticଏବଂ ମୋଡାଲ୍ ବାହାରେ ଏକ କ୍ଲିକ୍ କିମ୍ବା ଏକ ଏସ୍କେପ୍ କି ପ୍ରେସ୍ କୀବୋର୍ଡ୍ ଅପ୍ସନ୍ ସହିତ data-keyboardସେଟ୍ କରାଯାଇଥାଏ false|
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})