<button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
Launch demo modal
</button>
$('#myModal').modal({backdrop: 'static', keyboard: false})
<div id="idModal" class="modal hide" data-backdrop="static" data-keyboard="false">
$('#myModal').modal({
backdrop: 'static',
keyboard: false
})
or in HTML
<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">
<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>