As a beginner in jQuery, I am currently exploring how to create multiple popups within a window. My goal is to have each text trigger a different popup with unique content. Additionally, I would like the popups to close when clicked outside of the modal, rather than solely relying on pressing Esc. Any guidance or tips on achieving this would be greatly appreciated. Thank you in advance.
HTML:
<div id="main">
<h1 class="button" id="applepie">Apple Pie</h1>
<div class="modal-mask"></div>
<div class="modal-popup">hello</div>
<h3>Asian Noodles</h3>
<div class="modal-mask"></div>
<div class="modal-popup"></div>
<h3>Avocado Roll</h3>
<div class="modal-mask"></div>
<div class="modal-popup"></div>
<h3>Bruscetta</h3>
<div class="modal-mask"></div>
<div class="modal-popup"></div>
<h3>Bagels</h3>
<div class="modal-mask"></div>
<div class="modal-popup"></div>
<h3>Banana Pudding</h3>
<div class="modal-mask"></div>
<div class="modal-popup"></div>
</div>
CSS:
.modal-mask{
width:100%;
height:100%;
position: absolute;
top:0px;
z-index: 100;
background-color:#000;
opacity:0.4;
display:none;
}
.modal-popup{
position:fixed;
top: 50%;
left: 50%;
width: 5%;
height: 5%;
z-index: 101;
background-color:#fff;
display:none;
}
JS:
$(function(){
$(".button").on("click", function(){
$(".modal-mask").css("display", "block");
$(".modal-popup").css("display", "block");
$(document).on("keydown", function(event){
if(event.keyCode === 27){
$(".modal-mask").css("display", "");
$(".modal-popup").css({
"display": "",
"width": "",
"height": "",
"top": "",
"left": ""
});
}
});
});