Bootstrap Modal Hide function doesn't work-CodePudding

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  id="RequestModal" tabindex="-1">
        <div >
          <div >
            <div >
              <h5  id="RequestModalLabel">Confirm to submit below request?</h5>
            </div>
            <div >
              ...
            </div>
            <div >
              <button type="button"  data-bs-dismiss="modal">Cancel</button>
              <button type="button"  id="btn_close" onclick="f_test()">OK</button>
            </div>
          </div>
        </div>
      </div>

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.

CodePudding user response：

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/