xxxxxxxxxx
$("yourid").on('hide.bs.modal', function(){
// do it here
});
xxxxxxxxxx
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
xxxxxxxxxx
$('#myModal').on('hidden.bs.modal', function () {
// do something…
});
xxxxxxxxxx
<div id="app">
<child-component ref="childComponent"></child-component>
<button @click="click">Click</button>
</div>
xxxxxxxxxx
var ChildComponent = {
template: '<div>{{value}}</div>',
data: function () {
return {
value: 0
};
},
methods: {
setValue: function(value) {
this.value = value;
}
}
}
new Vue({
el: '#app',
components: {
'child-component': ChildComponent
},
methods: {
click: function() {
this.$refs.childComponent.setValue(2.0);
}
}
})
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
.close.mat-button {
position: absolute;
top: 0;
right: 0;
padding: 5px;
line-height: 14px;
min-width: auto;
}
<button class="close" mat-button [mat-dialog-close]="true">X</button>