xxxxxxxxxx
<body>
<div class="modal fade" id="modalID" tabindex="-1" data-bs-backdrop="true" style="border-radius:38px;">
<div class="modal-dialog">
<div class="modal-content">
Lorem ipsum .
</div>
</div>
</div>
</body>
<script>
// Bootstrap 5
let modal = new bootstrap.Modal( document.querySelector('#emailValidation'), { backdrop: true, keyboard: true } );
modal.toggle();
</script>
xxxxxxxxxx
<div
class="modal fade modal-under-nav" id="modalIdName"
data-bs-backdrop="static" data-bs-keyboard="false"
tabindex="-1" aria-labelledby="staticBackdropLabel"
aria-modal="true" role="dialog"
>
xxxxxxxxxx
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
xxxxxxxxxx
$('#myModal').modal({
backdrop: 'static',
keyboard: false
})
or in HTML
<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">
xxxxxxxxxx
<button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
Launch demo modal
</button>`
xxxxxxxxxx
<div class="modal fade" id="myModal" data-keyboard="false" data-backdrop="static">
xxxxxxxxxx
// target modal
data-target="#IdModalName"
// turn off click outside modal
data-backdrop="static"
// turn off keybord like esc
data-keyboard="false"
xxxxxxxxxx
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>
xxxxxxxxxx
var images_modal = document.getElementById('images-model-div');
var videos_modal = document.getElementById('video-model-div');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == images_modal) {
images_modal.style.display = "none";
}
if (event.target == videos_modal) {
videos_modal.style.display = "none";
}
}
xxxxxxxxxx
const ProductModal = ({ product, onClose }) => {
const handleCloseModal = (e) => {
// Check if the click target is the modal background
console.log(e)
if (e.target === e.currentTarget) {
onClose();
}
};
return (
<div className="fixed inset-0 flex justify-center items-center bg-gray-800 bg-opacity-75 z-50" onClick={handleCloseModal}>
<div className="bg-white rounded-lg p-8 relative">
<button onClick={onClose} className="absolute top-2 right-2 text-gray-600 hover:text-gray-800">
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
<h2 className="text-2xl font-semibold mb-4">{product.name}</h2>
<img src={`${BASE_URL}/images/${product.thumb_image || product.thumbImage}`} alt={product.name} className="w-full h-48 object-cover mb-4 rounded-lg" />
<p className="text-gray-600 mb-2">Price: ${product.price}</p>
<p className="text-gray-600">{product.description}</p>
</div>
</div>
);
};
//in another component
const openModal = (product) => {
setSelectedProduct(product);
};
const closeModal = () => {
setSelectedProduct(null);
};
// the calling
<ProductModal product={selectedProduct} onClose={closeModal} />