I've configured a Bootstrap dropdown in my site's mini cart that includes a lightbox effect to grey out the background content when the dropdown is activated. Here's the code snippet:
$(".dropdown").on('show.bs.dropdown hide.bs.dropdown', function(e) {
var lightbox = document.getElementById("lightbox_container");
if(e.type == 'hide'){
lightbox.style.display = "none";
} else if(e.type == 'show'){
lightbox.style.display = "block";
}
});#lightbox_container{
position:fixed;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.5);
z-index:40;
display:none;
top:0px;
left:0px;
}The setup is functioning as expected, but I'd like the mini cart to pop up automatically when an item is added. As a Bootstrap novice, I'm unsure of how to achieve this effectively.
I initially tried the following approach:
function show_cart(){
$(".minicart").addClass("show");
// more functionality here
}
However, this method has limitations like not being able to close the dropdown by clicking outside of it. So, I made some edits:
function show_cart(){
$(".minicart").addClass("show");
// additional changes for better functionality
}
To hide the mini cart again, I included an on-click event for the lightbox itself:
$("#lightbox_container").on("click", function(){
// functionality to hide the mini cart and lightbox
});