Prevent Bootstrap Modal from disappearing when clicking outside or pressing escape?
If using JavaScript then:
$('#myModal').modal({
backdrop: 'static',
keyboard: false
})
in case of 'show'
$('#myModal').modal({backdrop: 'static', keyboard: false}, 'show');
or in HTML:
<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">
Disable click outside of bootstrap modal area to close modal
On Options chapter, in the page you linked, you can see the backdrop
option. Passing this option with value 'static'
will prevent closing the modal.
As @PedroVagner pointed on comments, you also can pass {keyboard: false}
to prevent closing the modal by pressing Esc.
If you opening the modal by js use:
$('#myModal').modal({backdrop: 'static', keyboard: false})
If you are using data attributes, use:
<button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
Launch demo modal
</button>`
Stop modal from closing on outside click
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>
From the documentation:
Specify 'static' for a backdrop that doesn't trigger an "onHide" when clicked.
react-bootstrap
Bootstrap 4 - Avoid modal closing for on-screen click
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"> </script>
<div data-toggle="modal" data-target="#modalid">Open</div>
<div class="modal fade" id="modalid" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<div class="modal-body" style="background-color: #F0F0F0">
Content
</div>
</div>
</div>
angular js: Prevent Bootstrap Modal from disappearing when clicking outside or pressing escape?
Use:
backdrop: 'static'
backdrop
- controls presence of a backdrop. Allowed values: true
(default), false (no backdrop), 'static' - backdrop is present but
modal window is not closed when clicking outside of the modal window.
For example:
$modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
backdrop: 'static'
})
Bootstrap 5 Static Modal Still Closes when I Click Outside
The issue is that you're using Bootstrap 5, but the syntax is of Bootstrap 4. All the data-*
attributes of Bootstrap 4 are now data-bs-*
in Bootstrap 5 to help the user identify their own data-*
from Bootstrap's.
So in your code, change data-static
to data-bs-static
& data-keyboard
to data-bs-keyboard
and your code should work fine.
stop closing the modal by clicking backdrop or outside the modal
As per the answer of @anshuVersatile, I understand we need to use some modal options.
Then I create a object of NgbModalOptions and pass it as second parameter of my open method and it works.
Code is as follows :
let ngbModalOptions: NgbModalOptions = {
backdrop : 'static',
keyboard : false
};
console.log(ngbModalOptions);
const modalRef = this.modalService.open(NgbdModalContent, ngbModalOptions);
Here is the updated plunker.
Related Topics
Position: Sticky' Not Working When 'Height' Is Defined
<Input Type="Number"> Not Working in Ie10
Change Select List Option Background Colour on Hover in HTML
CSS Transform Origin Issue on Svg Sub-Element
Space Between Two Rows in a Table
What's the Best Way to Set a Single Pixel in an HTML5 Canvas
Valid to Use <A> (Anchor Tag) Without Href Attribute
Customizing Increment Arrows on Input of Type Number Using CSS
What's the Difference Between "&Nbsp;" and " "
How to Style Dt and Dd So They Are on the Same Line
How to Include a Font .Ttf Using CSS
How to Display Pdf File in Html
Is Html5 Localstorage Asynchronous
Youtube Autoplay Not Working on Mobile Devices With Embedded Html5 Player