Bootstrap Modal Hide function doesn't work

Question

I used Bootstrap modal dialog with OK/Cancel button. I expect some work to be done after OK is clicked and then close the modal dialog. So I used JS to handle OK click.

HTML:

      <div class="modal fade" id="RequestModal" tabindex="-1">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="RequestModalLabel">Confirm to submit below request?</h5>
            </div>
            <div class="modal-body">
              ...
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
              <button type="button" class="btn btn-primary" id="btn_close" onclick="f_test()">OK</button>
            </div>
          </div>
        </div>
      </div>

JS

function f_test () {
      var myModal = new bootstrap.Modal(document.getElementById('RequestModal'));
      myModal.hide();
}

The hide function doesn't work. I searched the stackoverflow and others but didn't get good answer.

Answer 1

You are very close. Create the object of the modal dialog first and then use it to hide on the f_test() method as shown below,

 var myModal = new bootstrap.Modal(document.getElementById('RequestModal'));
 myModal.show();

function f_test () {

   myModal.hide();
}

JSFiddle: https://jsfiddle.net/78n9k65L/