CODEWITHSUNDEEP
javascriptreactjsbootstrap-5sweetalert
Basil VJ
Basil VJ

Reputation: 1

Close the Boostrap Modal when clicked back button in sweetalert

**I would like to close bootstrap modal when I click the back in SweetAlert. I've tried modal.hide() but its not working.I am using bootstrap version 5 . Also i went through their documentation, which didnt help does anybody know how to do this. **

//inside of handleSubmit function

swal({
          title: "Great!",
          text: "Job updated successfully!",
          icon: "success",
          buttons: {
            back: {
              text: "Back",
              value: "back",
            },
          },
        }).then((value) => {
          if (value === "back") {
           //rest of the code
          }
        });

 return (
    <div id="edit_job" className="modal custom-modal fade" role="dialog">
      <div className="modal-dialog modal-lg" role="document">
        <button type="button" className="close" data-bs-dismiss="modal">
          ×
        </button>
        <div className="modal-content">
          <div className="modal-header">
            <h5 className="modal-title">Edit Job</h5>
            <button
              type="button"
              className="close"
              data-bs-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div className="modal-body">
            //form
          </div>
        </div>
      </div>
    </div>
  );

Upvotes: -1

Views: 173

Answers (1)

ajaythxkur
ajaythxkur

Reputation: 79

Give this button an id:

<button
          type="button"
          className="close"
          data-bs-dismiss="modal"
          aria-label="Close"
          id="button_id"
        >

And then,

if(value === "back"){
document.getElementById("button_id").click()
}

Upvotes: 1

Related Questions