Bootstrap modal closes while clicked on the modal content body

Question

I have a bootstrap modal, it closes while I click on any part of the modal body, which is not a natural behavior of a modal. My code is here:

<div data-toggle="modal" data-target="#myModal"
                  data-backdrop="static" data-keyboard="false"
                  className="db-file curp"
                  key={t.id}
                  onClick={() =>{
                    const temp = this.props.selectTable(t);
                    this.props.getTableData(
                      this.props.jwt,
                      temp.payload.id
                    );
                      // window.open('./update-synonym', '_blank');
                    }
                  }
                >
                  <div className="db-items">
                    <div className="data-row">
                      <img src="./images/Group 15.svg" alt="file-icon" />
                      <p className="text-center white-font">{t.name}</p>
                    </div>
                  </div>
                   <div className="modal fade synonym-modal"
                    id="myModal" tabIndex="-1"
                    role="dialog"
                    data-backdrop="true"
                    aria-labelledby="myModalLabel">
                    <div className="modal-dialog" role="document">
                      <div className="modal-content">
                        {this.createTable()}
                      </div>
                    </div>
                   </div>
                </div>

And another code snippet is:

 $('#myModal').on('shown.bs.modal', () => {
  $('#myInput').focus()
});

how can I disable this behavior?

Answer 1

You can use :

$("#myModal").modal({"backdrop": "static"});

to make modal stay open then close it on some button.