Stop modal from closing on outside click

Question

Is there anything that can be done to make keep a Modal open when clicking outside the container?

I have a password change screen and I need the Modal to ONLY close when clicking on the submitbutton. which only becomes active when certain conditions are met.

<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>

UPDATE
Appart from adding backdrop={ 'static' } you will most likely still be able to close the modal by clicking the Escape key.
To prevent this add one more thing to your modal window: keyboard={ false }.

This should suffice in keeping the modal open.

Answer 1

Remove onHide from the Modal onHide={this.handleClose}

Answer 2

Don't pass the onHide or onClose props.

Answer 3

• Make sure your URL is correctly formatted in the Project Properties.
• Also, make sure you set up a default startup page (if you don't have an Index action in the Home Controller).
• You mentioned that the app is a ASP.NET Core Web API app that does not include and serve a default page, so that it would cause a 404 Not Found error while you access the site without a fully qualified URI.
• Call the UseDefaultFiles method in Configure method of Startup.cs
• This can be fixed by rewriting the Always on path. After a cold start of your application, AlwaysOn will send a request to the ROOT of your application “/”.

Please refer HTTP status code mismatch and 404 response code caused by App Services – AlwaysOn feature for more details.