有什么办法可以让
Modal
在单击容器外部时保持打开状态?
我有一个密码更改屏幕,我需要仅在单击
Modal
按钮时关闭 submit
。仅当满足某些条件时才会激活。
<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 }
。
这应该足以保持模式打开。
将模态框的背景设置为静态。模态组件有一个
backdrop
属性,将其设置为 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>
来自文档:
为单击时不会触发“onHide”的背景指定“静态”。 反应引导
从模态中删除 onHide
onHide={this.handleClose}
请勿传递
onHide
或 onClose
道具。
我也想实现同样的目标,并且添加这个
<Modal keyboard={false} ...>
对我有用。