Want to stop modal from closing on outside click in React? Set the modal’s backdrop to static. The modal component has a prop of backdrop, set that to backdrop=”static”
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <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> |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
