<div id="idModal" class="modal hide" data-backdrop="static" data-keyboard="false">

 <button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">

    Launch demo modal

 </button>

​

$('#myModal').modal({backdrop: 'static', keyboard: false})  

​

<!-- Button trigger modal -->

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">

  Launch static backdrop modal

</button>

​

<!-- Modal -->

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">

  <div class="modal-dialog">

    <div class="modal-content">

      <div class="modal-header">

        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>

        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

      </div>

      <div class="modal-body">

        ...

      </div>

      <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

        <button type="button" class="btn btn-primary">Understood</button>

      </div>

    </div>

  </div>

</div>

$('#myModal').modal({

    backdrop: 'static',

    keyboard: false

})

​

or in HTML

<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">

 <button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">

    Launch demo modal

 </button>`

​

<div class="modal fade" id="myModal" data-keyboard="false" data-backdrop="static">

​

Set the modal's backdrop to static. The modal component has a prop of backdrop, set that to backdrop="static"

​

<div>

    <Modal show={this.state.show} onHide={this.handleClose} backdrop="static">

        <Modal.Header>

            <Modal.Title>Change Password</Modal.Title>

        </Modal.Header>

        <Modal.Body>

            <form className="form-horizontal" style={{margin:0}}>

                <div className='password-heading'>This is the first time you have logged in.</div>

                <div className='password-heading'>Please set a new password for your account.</div>

                <br/>

​

                <label className="password">Password

                    <input type={this.state.type} className="password__input" onChange={this.passwordStrength}/>

                    <span className="password__show" onClick={this.showHide}>{this.state.type === 'input' ? 'Hide' : 'Show'}</span>

                    <span className="password__strength" data-score={this.state.score}>

                        <div className="strength_string">{this.state.strength}</div>

                    </span>

                </label>

                <br/>

                <label className="password">Confirm Password

                    <input type={this.state.type} className="password__input" onChange={this.passwordStrength}/>

                </label>

​

            </form>

            <br/>

        </Modal.Body>

        <Modal.Footer>

            <Button onClick={this.submitPassword} disabled={this.state.isDisabled}>Submit</Button>

        </Modal.Footer>

    </Modal>

</div>