Search code examples
javascriptreactjsbootstrap-5sweetalert

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>
  );

Solution

  • 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()
    }