点击容器外部时如何让 Modal
保持打开状态?
我有一个密码更改屏幕,我需要Modal
只有在单击提交
按钮时才关闭。而此按钮仅在满足某些条件时才变为活动状态。
<div>
<Modal show={this.state.show} onHide={this.handleClose}>
<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>
更新
除了添加 backdrop={ 'static' }
,您很可能仍然可以通过单击Escape
键来关闭模态窗口。
为了防止这种情况,请向您的模态窗口添加一个东西:keyboard={ false }
。
这应该足以保持模态窗口处于打开状态。