While delving deeper into the realm of Javascript, I encountered a stumbling block with a single popup intended for the main page of a WordPress website I am constructing. Despite my attempts to modify the code's variables, they seem unyielding. Surprisingly, the console.log('modal initiated') function works flawlessly, yet the others remain lifeless.
<html>
<div class="popup-body_1" id="popup-show_1" style="">
<div class="popup-wrapper_1">
<span class="popup-x_1" id="popup-x_1">×</span>
<div class="popup-image_1 popup-image-custom_1">
<img class="product-image_1" src="https://mlservice.blob.core.windows.net/website/UploadBestanden/tn/cc675fd2-f457-4986-af22-2810ce7a3167-1440-420.jpg">
</div>
<div class="sign-up_1">
<h2 class="content-cont1_1" ><span class="popup-title_1">Nieuw hier ? </span></h2>
<p><span class="popup-subtitle_1">laat me <strong>weten</strong><br class="popup-pc_1"> wat ben jij?</span></p>
<div class="popup-content_1">
<div class="tooltip">
<button class="submit-shop_2" href="https://www.werkenbijml.nl/job-dashboard">Ben jij enn werknemer?</button>
</div>
<span>
</span>
<div>
<button class="submit-shop_1 custom-btn_1 content-cont3_1" href="https://www.ml-service.nl/">Ben jij een werkgever?</button>
</div>
</div>
</div>
</div>
</div>
</html>
<style>
.popup-blackout_1{
position: fixed;
background: #000;
display: block;
opacity: .0;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 200;
}
.popup-body_1 {
width: 75%;
max-width: 800px;
position: fixed;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: 0 auto;
background: #e0e6eb;
border-radius: 20px;
z-index: 250;
}
.product-image_1{
border-top-left-radius: 25px;
border-bottom-left-radius:25px;
}
.popup-content_1{
margin-top:15%;
}
.popup-wrapper_1 {
display: flex;
...
.google-play-badge{
color:red;
}
@media(min-width:768px){
}
.custom-container{
display:flex;
}
/*Tooltip*/
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: -5px;
left: 105%;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<script>
var modalbanner = document.getElementById("popup-show_1");
var spanbanner = document.getElementsByClassName("popup-x_1")[0];
setTimeout(function () {
modalbanner.style.display = "block";
console.log("modal initiated");
}, 10000);
spanbanner.onclick = function () {
modalbanner.style.display = "none";
console.log("closed banner");
}
spanbanner.onclick = function (event) {
if (event.target == modalbanner) {
modalbanner.style.display = "closed banner";
}
}
</script>