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} />
xxxxxxxxxx
<button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
Launch demo modal
</button>
xxxxxxxxxx
<div id="idModal" class="modal hide" data-backdrop="static" data-keyboard="false">
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
<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
//with jQuery
$('#myModal').modal({
backdrop: 'static',
keyboard: false
});
jQuery, bootstrap, modal
xxxxxxxxxx
<button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
Launch demo modal
</button>`