How do I close a bootstrap (5.2) Modal from Javascript?

Question

For a school project's sake, I created a modal using bootstrap in html, inside of it there is a prompt that I must check from javascript, how do I close the Modal from javascript, so that in case the prompt is valid I can just save the changes and if it isn't I throw an exception? small note (Please without jQuery, I've seen a similar thread that had as a reply using this library, it's forbidden for the assignment)

this is my html code:

<div class="modal fade" id="bidModal" tabindex="-1" aria-labelledby="bidModal" aria-hidden="true">
        <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="bidModalLabel">Bid amount</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="text" id="prompted">How much do you want to bet?</p>
                <div class="input-group mb-2">
                    <input id="bAmount" type="text" class="form-control text" aria-label="Amount of bet">
                    <span class="input-group-text">€</span>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel bid</button>
                <button type="button" onClick="bid()" class="btn btn-success">Save bid</button>
            </div>
        </div>
        </div>
    </div>

this is my javascript code:

function bid(){
    let valueOfBid = document.getElementById("bAmount").value;
    if(isNaN(valueOfBid)){
        //Cancel the prompt
    }

    players[realPlayer].bet=valueOfBid;
    changeButtonState(false);
    theTimer();
}

Answer 1

Please try like this. I suggest that you change isNaN(valueOfBid) to valueOfBid == "" before you add my code on your codebase.

function bid(){
    let valueOfBid = document.getElementById("bAmount").value;
    if(valueOfBid == ""){
      alert(1)
        //Cancel the prompt
      var myModalEl = document.getElementById('bidModal');
var modal = bootstrap.Modal.getInstance(myModalEl)
modal.hide();
    }

    // players[realPlayer].bet=valueOfBid;
    // changeButtonState(false);
}

Answer 2

you can add this to the element that should close the modal...

   data-bs-dismiss="modal"

the following modal generates a list of links based off of a search term and user matches.

when they click one of the router links it will close the modal because of the line

<router-link :to="{ name: 'user', params: {user: user }}"
   data-bs-dismiss="modal"
   >{{ user }}
</router-link
              >

the above code is generated INSIDE the modal -> here is the entire thing

  <div class="full-page">
    <div
      class="modal fade"
      id="findUser"
      data-bs-backdrop="static"
      data-bs-keyboard="false"
      tabindex="-1"
      aria-labelledby="staticBackdropLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="staticBackdropLabel">Find User</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <label for="recipient-name" class="col-form-label"
              >Steem Username:</label
            >
            <input
              type="text"
              v-model="userField"
              class="form-control"
              id="recipient-name"
            />
          </div>
          <div v-if="userField"></div>
          <ul v-for="(user, index) in userMatches" :key="index">
            <li>
              <router-link
                :to="{ name: 'user', params: { user: user } }"
                data-bs-dismiss="modal"
                >{{ user }}</router-link
              >
            </li>
          </ul>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              Close
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>