We Keep Coding

How do I make me popup display on all of buttons with minimal Javascript

What I want
I have a page that you use to shop for cards and I do not want to create like 100 pages for different products so I just want a popup for each tile. But when I assign my id to javascript then I create another rid and just put a comma then that id name after there is no response.
My question is
How do I apply the same javascript to different buttons with the same effect But with different content with minimum code?
My code so far
// Get the modal
var modal = document.getElementById("myModalz");
// Get the button that opens the modal
var btn = document.getElementById("myBtnz");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("closez")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
#import url("https://fonts.googleapis.com/css2?family=Istok+Web:wght#400;700&display=swap");
* {
margin: 0;
padding: 0;
font-family: "Istok Web", sans-serif;
}
.card {
margin: 0.5%;
display: inline-block;
position: relative;
width: 320px;
height: 480px;
background: #191919;
border-radius: 20px;
overflow: hidden;
}
.card::before {
content: "";
position: absolute;
top: -50%;
width: 100%;
height: 100%;
background: #ffce00;
transform: skewY(345deg);
transition: 0.5s;
}
.card:hover::before {
top: -70%;
transform: skewY(390deg);
}
.card::after {
content: "CORSAIR";
position: absolute;
bottom: 0;
left: 0;
font-weight: 600;
font-size: 6em;
color: rgba(0, 0, 0, 0.1);
}
.card .imgBox {
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding-top: 20px;
z-index: 1;
}
.card .imgBox img {
max-width: 100%;
transition: .5s;
}
.card:hover .imgBox img {
max-width: 50%;
}
.card .contentBox {
position: relative;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 2;
}
.card .contentBox h3 {
font-size: 18px;
color: white;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
}
.card .contentBox .price {
font-size: 24px;
color: white;
font-weight: 700;
letter-spacing: 1px;
}
.card .contentBox .buy {
position: relative;
top: 100px;
opacity: 0;
padding: 10px 30px;
margin-top: 15px;
color: #000000;
text-decoration: none;
background-color: #ffce00;
border-radius: 30px;
text-transform: uppercase;
letter-spacing: 1px;
transition: 0.5s;
}
.card:hover .contentBox .buy {
top: 0;
opacity: 1;
}
.mouse {
height: 300px;
width: auto;
}
/* The Modal (background) */
.modalz {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modalz-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.closez {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.closez:hover,
.closez:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<!--zero-->
<div class="card">
<div class="imgBox">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.redd.it%2Fw8f8iuj68tn61.jpg&f=1&nofb=1" alt="Backrooms Pack" class="mouse">
</div>
<div class="contentBox">
<h3>Backrooms Pack</h3>
<h2 class="price">4.<small>99</small> $</h2>
Buy Now
</div>
</div>
<!-- The Modal -->
<div id="myModalz" class="modalz">
<!-- Modal content -->
<div class="modalz-content">
<span class="closez">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<!--one-->
<div class="card">
<div class="imgBox">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.y50mqCTtnDQNTZL3prMvUgHaJb%26pid%3DApi&f=1" alt="War Pack" class="mouse">
</div>
<div class="contentBox">
<h3>War Pack</h3>
<h2 class="price">4.<small>99</small> $</h2>
Buy Now
</div>
</div>
<!-- The Modal -->
<div id="myModalz" class="modalz">
<!-- Modal content -->
<div class="modalz-content">
<span class="closez">×</span>
<p>Some text in the Modal..</p>
</div>
</div>

document.getElementsByClassName("buy") will return a collection of the anchor tags with the class 'buy' that you can then loop over and apply the binding to that event.
Alternatively you could use a <button> tag and then loop over document.getElementsByTagName('button').
So
const elements = document.getElementsByClassName("buy");
[...elements].forEach((element) => {
element.onclick = function(event) {
// Now you've got the event you can use it's target, parent or siblings
// to get some content from the wrapping element, something like this
// (you may need to change this but start with event.target)
const content = event.target.parent.innerHTML();
// Set that content on the modal
const modalContentElement = document.querySelector(".modalz-content p");
modalContentElement.innerHTML(content);
// Then open the modal!
modal.style.display = "block";
}
}

modal doesn't show when placed inside a div that has a show/hide function

I have a straightforward multi-image modal set up which works perfectly. However, the page I am trying to integrate it on is set up as follows: I have a header, a set of links to the left, and a main section next to the links. When a link is clicked it changes the content of the main section through a hide/show function. In this manner all of the site is on one page. The problem is that when I place the modal inside the hidden div of choice, the images show up when the main contents is changed, but the modal does not open when the image is clicked. Here is the code for the main div and the hidden div where the modal will be (the user needs to click on where the image would be that says "fall bill" to open the div where the modal is. You will see that I placed some images in as holders. The images fade when hovered as they are supposed to. I cannot figure out any reason why the modal will not show up in such an instance but works if it is not inside a div that can be hidden.
Here is a the code:
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('img');
var modalImg = document.getElementById("img01");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
console.log(evt);
modal.style.display = "block";
modalImg.src = this.src;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
function show(param_div_id) {
document.getElementById('main').innerHTML = document.getElementById(param_div_id).innerHTML;
}
.img {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.img:hover {
opacity: 0.8;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 10;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
.modal-content,
#caption {
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
#media only screen and (max-width: 700px) {
.modal-content {
width: 100%;
}
}
#main {
background-image: url('bkgd.jpg');
display: block;
width: 690px;
font-family: "Book Antiqua";
color: #004B97;
font-size: 16pt;
padding: 2%;
margin: 5px;
border-radius: 15px;
border: medium #9999FF solid;
}
.mainContents {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
position: relative;
width: 690px;
flex-wrap: wrap;
justify-content: center;
}
#home,
#bills,
#munTax,
#schoolTax,
#interimTax,
#taxCert,
#dupsReceipts,
#directions,
#FAQ {
display: none;
width: 300px;
font-family: "Book Antiqua";
color: #004B97;
}
.head {
width: 100%;
text-align: center;
font-family: inherit;
font-size: 16pt;
color: #004B97;
padding-bottom: 10px;
}
.head2 {
position: relative;
width: 100%;
text-align: center;
font-family: inherit;
font-size: 14pt;
color: #835BF9;
padding-bottom: 15px;
}
.lower {
width: 100%;
display: flex;
margin: 0 auto auto 10;
flex-wrap: wrap;
justify-content: space-around;
padding: 10px;
align-items: center;
}
.pay {
text-align: center;
background-image: url('background.jpg');
color: #0D095E;
font-size: 14pt;
border: medium #9999FF solid;
border-radius: 15px;
padding: 5px;
margin: 5px;
}
<div id="main">
<div class="mainContents">
<div class="head">Outside Receiving Hours:<br/> Please use secure drop box outside building
</div>
<div class="head2">
<strong>2022 Millage Rates</strong><br/> County - 3.2273; Township - .62; PVSD (School + Library) = 23.8117
</div>
<div class="lower">
<div class="pay">
Pay Tax Bill Online<br/>
<img alt="Pay Online" height="80" src="payonline.png" width="144">
</div>
<div class="pay">
Understanding Your Tax Bill<br/>
<button onclick="show('bills')" class="link"><img alt="Fall Bill" height="129" src="FallTaxBill-psd.png" width="300"></button>
</div>
</div>
</div>
</div>
<div id="bills">
<div class="mainContents">
<div class="head">Understanding Your Tax Bill</div><br/>
<div class="lower">
<div class="pay">
Spring Tax Bill<br/>
<img class="img" src="http://onebigphoto.com/uploads/2012/10/midnight-sun-in-lofoten-norway.jpg" alt="Midnight sun in Lofoten, Norway" width="300" height="200">
</div>
<div class="pay">
Fall Tax Bill<br/>
<img class="img" src="http://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1490029386/fisherman-cabin-hamnoy-lofoten-islands-norway-NORWAY0320.jpg?itok=cpPuUjh1" alt="Fishermen's cabins in Lofoten, Norway" width="300" height="200">
</div>
<div class="pay">
Fall Tax Bill Stubs<br/>
<img class="img" src="http://fjordtours.blob.core.windows.net/fjordtours-umbraco/1199/gerirangerfjord-per-ottar-walderhaug-fjordnorway.jpg" alt="Gerirangerfjord, Norway" width="300" height="200">
</div>
</div>
</div>
</div>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>

the listeners are removed when content is swapped, add image listeners there instead:
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('img');
var modalImg = document.getElementById("img01");
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
function show(param_div_id) {
document.getElementById('main').innerHTML = document.getElementById(param_div_id).innerHTML;
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
console.log(evt);
modal.style.display = "block";
modalImg.src = this.src;
}
}
}
.img {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.img:hover {
opacity: 0.8;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 10;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
.modal-content,
#caption {
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
#media only screen and (max-width: 700px) {
.modal-content {
width: 100%;
}
}
#main {
background-image: url('bkgd.jpg');
display: block;
width: 690px;
font-family: "Book Antiqua";
color: #004B97;
font-size: 16pt;
padding: 2%;
margin: 5px;
border-radius: 15px;
border: medium #9999FF solid;
}
.mainContents {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
position: relative;
width: 690px;
flex-wrap: wrap;
justify-content: center;
}
#home,
#bills,
#munTax,
#schoolTax,
#interimTax,
#taxCert,
#dupsReceipts,
#directions,
#FAQ {
display: none;
width: 300px;
font-family: "Book Antiqua";
color: #004B97;
}
.head {
width: 100%;
text-align: center;
font-family: inherit;
font-size: 16pt;
color: #004B97;
padding-bottom: 10px;
}
.head2 {
position: relative;
width: 100%;
text-align: center;
font-family: inherit;
font-size: 14pt;
color: #835BF9;
padding-bottom: 15px;
}
.lower {
width: 100%;
display: flex;
margin: 0 auto auto 10;
flex-wrap: wrap;
justify-content: space-around;
padding: 10px;
align-items: center;
}
.pay {
text-align: center;
background-image: url('background.jpg');
color: #0D095E;
font-size: 14pt;
border: medium #9999FF solid;
border-radius: 15px;
padding: 5px;
margin: 5px;
}
<div id="main">
<div class="mainContents">
<div class="head">Outside Receiving Hours:<br/> Please use secure drop box outside building
</div>
<div class="head2">
<strong>2022 Millage Rates</strong><br/> County - 3.2273; Township - .62; PVSD (School + Library) = 23.8117
</div>
<div class="lower">
<div class="pay">
Pay Tax Bill Online<br/>
<img alt="Pay Online" height="80" src="payonline.png" width="144">
</div>
<div class="pay">
Understanding Your Tax Bill<br/>
<button onclick="show('bills')" class="link"><img alt="Fall Bill" height="129" src="FallTaxBill-psd.png" width="300"></button>
</div>
</div>
</div>
</div>
<div id="bills">
<div class="mainContents">
<div class="head">Understanding Your Tax Bill</div><br/>
<div class="lower">
<div class="pay">
Spring Tax Bill<br/>
<img class="img" src="http://onebigphoto.com/uploads/2012/10/midnight-sun-in-lofoten-norway.jpg" alt="Midnight sun in Lofoten, Norway" width="300" height="200">
</div>
<div class="pay">
Fall Tax Bill<br/>
<img class="img" src="http://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1490029386/fisherman-cabin-hamnoy-lofoten-islands-norway-NORWAY0320.jpg?itok=cpPuUjh1" alt="Fishermen's cabins in Lofoten, Norway" width="300" height="200">
</div>
<div class="pay">
Fall Tax Bill Stubs<br/>
<img class="img" src="http://fjordtours.blob.core.windows.net/fjordtours-umbraco/1199/gerirangerfjord-per-ottar-walderhaug-fjordnorway.jpg" alt="Gerirangerfjord, Norway" width="300" height="200">
</div>
</div>
</div>
</div>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>

Modal image close preview from w3schools.com not working

Heres the link to the w3 page https://www.w3schools.com/howto/howto_css_modal_images.asp, and all the changes made is only in the javascript. Note that the one in the w3 page isnt working so i had to find a solution from this page and found this https://jsfiddle.net/snowMonkey/f1zav0ge/ and i took only the javascript code from here, and both still doesnt work
Heres the html:
<html>
<head>
<title>Gallery | safsafa</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="gallery.css">
<link rel = "icon" href = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUXLH90QAaWzieHLTW9BxxNvSKIEhAzRzJ1g&usqp=CAU" type = "image/x-icon">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
</head>
<body>
<header>
<h1><span><i class="fa fa-trophy" aria-hidden="true"></i> fsasaf</span></h1>
<ul class="nav_links">
<li>Gallery</li><li>Showcase</li><li>About</li><li class="nav-seperator">|</li>
</ul>
</header>
<main>
<div class="container">
<h2>//CLICK THESE IMAGES</h2><br>
<img class="myImages" id="myImg" src="image/racoon.jpg" alt="A Racoon" style="width:100%;max-width:300px">
<img class="myImages" id="myImg" src="image/hamster.jpg" alt="A Hamster" style="width:100%;max-width:300px">
<img class="myImages"id="myImg" src="image/hedgehog.jpg" alt="A Hedgehog" style="width:100%;max-width:300px">
<img class="myImages" id="myImg" src="image/artic_fox.jpg" alt="An Artic Fox" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
</div>
</main>
<script>
window.addEventListener('scroll',function(){
var header = document.querySelector("header");
header.classList.toggle('sticky',window.scrollY > 0)
})
</script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="aos.js"></script>
<script src="https://unpkg.com/aos#next/dist/aos.js"></script>
<script>
AOS.init();
</script>
<script>
// create references to the modal...
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('myImages');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementById("caption");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
console.log(evt);
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>
And heres the css:
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Heebo:wght#500&display=swap');
*{
margin: 0;
padding: 0;
}
body{
background-color: #9dc1fc;
}
header{
position: fixed;
overflow: hidden;
top: 0;
width: 100%;
background-color:;
transition: 0.6s;
z-index:10000000;
}
header span{
font-family:Poppins, sans-serif;
cursor: pointer;
font-size: 125%;
font-weight: 900;
padding-left: 70px;
}
header .nav-seperator{
color: black;
cursor: pointer;
}
header span{
letter-spacing:-2px;
font-size: 115%;
color: blackc;
}
header ul{
font-family:Heebo, sans-serif;
font-weight: 6200;
font-size: 100%;
list-style-type: none;
padding-right: 100px;
}
header li{
display: inline-block;
}
header li a{
margin-right:30px;
text-decoration: none;
color: black;
transition: all 0.3s ease 0s;
}
header li a:hover{
color: #fe6e00;
}
header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
header.sticky{
background-color:rgba(0,0,0,0.5)
}
header.sticky ul li a{
color: white;
}
header.sticky span{
color: white;
}
header.sticky .nav-seperator{
color: white;
}
/* MAIN CONTAINER*/
main .container{
margin-top: 100px;
margin-left: 200px;
margin-right: 200px;
text-align:center;
text-transform:uppercase;
color:black;
font-family: Poppins;
font-size: 2rem;
font-weight: 900;
}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}

Currently, the close button on the modal window remains below the navigation and therefore cannot be clicked. In order to be able to close the modal it is necessary to make these two changes in CSS:
On style header set z-index: 10;
On style .modal set z-index: 11;
This change he made so that when the modal window opens it will stand above the navigation and the "close" button can be clicked.

Trying to get div element to move while hovering another one

So: the thing I'm trying to achieve is that I somehow need to get the dot-container div element to move at the same time when the .title-container div element is hovered. In the script section of this code, i tried to do this with the "onmouseover" and "onmouseout" javascript event and then changing the top attribute, but it somehow doesnt work! I've also tried using translate() method instead of the top attribute, doesnt work either! Please note that i am not familiar with jquery, so i would prefer solutions without jquery.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Top 8 of Europe</title>
<link rel="icon" href="europe.ico">
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: block;
margin: 0;
padding: 0;
font-family: georgia;
background: #333333;
}
.title-h1 {
text-align: center;
font-family: georgia;
color: #cccccc;
}
.title-blockquote {
font-style: italic;
color: #cccccc;
}
hr.title-hr{
border-style: solid;
border-color: #cccccc;
margin-left: 10%;
margin-right: 10%;
margin-top: 10px;
margin-bottom: 10px;
}
.center-img {/* Alle Titelbilder der Slides */
display: block;
position: absolute; /* position: absolute erlaubt nachher im inline styletag des einzelnen bildes eine benutzerdefinierte ausrichtung */
width: 100%;
}
/* Slideshow behaelter */
.slideshow-container {
width: 100%;
height: 3000px;
margin: auto;
}
.image-container {
position: absolute;
height: 100vh;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.title-container {
position: absolute;
display: block;
height: 35vh;
width: 20vw;
top: 40vh;
left: 40vw;
padding: 40px;
background: #333333;
box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.4);
transition: transform 0.5s ease;
}
.title-container:hover {/* Beim Hovern kann man das Hintergrundbild sehen */
background: transparent;
transform: translate(0,-10vh);
}
.title-container:hover * {/* Die schriftfarbe wird hierbei ebenfalls geaendert */
color: black;
}
.title-container:hover h1 {
color: transparent;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0px 3px;
background-color: #999999;
border-radius: 50%;
transition: background-color 0.6s ease;
user-select: none;
}
#dot-container {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
height: 15vh;
width: 20vw;
top: 63vh;
left: 40vw;
background: transparent;
transition: transform 0,5s ease;
}
.active, .dot:hover {
background: white;
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="image-container">
<img class="center-img" style="top: -15vh;" src="sansebastian.jpg">
<div class="title-container">
<h1 class="title-h1">8. San Sebastian</h1>
<hr class="title-hr">
<blockquote class="title-blockquote">
"San Sebastian - this city is well-known for its amazingly tasty "Tapas" and attracts a lot of tourists due to
the sunny weather and its location at the atlantic ocean. This is the place for you!"
</blockquote>
</div>
</div>
</div>
<div id="dot-container">
<div class="dot" onclick="currentSlide(1)"></div>
<div class="dot" onclick="currentSlide(2)"></div>
<div class="dot" onclick="currentSlide(3)"></div>
<div class="dot" onclick="currentSlide(4)"></div>
<div class="dot" onclick="currentSlide(5)"></div>
<div class="dot" onclick="currentSlide(6)"></div>
<div class="dot" onclick="currentSlide(7)"></div>
<div class="dot" onclick="currentSlide(8)"></div>
<div class="dot" onclick="currentSlide(9)"></div>
</div>
<!-- sidebar -->
</div>
document.getElementsByClassName("title-container").onmouseover = function mouseOver() {
document.getElementById("dot-container").style.top = "53vh";
}
document.getElementsByClassName("title-container").onmouseout = function mouseOut() {
document.getElementById("dot-container").style.top = "63vh";
}
</script>
</body>
</html>

Just include jQuery first
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Then
$(".title-container").hover(function() {
alert('on hover');
}, function() {
alert('on hover out');
});
Without jQuery
var title = document.querySelector('.title-container');
title.addEventListener('mouseenter', function(){
});

How is this JQuery Popup bug fixed?

I have an interesting problem with my JQuery Popup. On the nav, you can click "Login" or "Sign Up" and a popup will appear. On the bottom of each popup is a link to the other process. So on the "Login" popup, on the very bottom it says: "Not a member yet? Sign Up." I click on Sign Up, it closes the login popup and opens the sign up popup. However, for the signup popup this process only happens if the login popup opens first. I don't know why this bug is occurring. Any help would be greatly appreciated?
/* font */
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* end of font */
/* clear settings */
a {
text-decoration: none;
}
body {
padding: 0;
margin: 0;
background: white;
}
/* end of clear settings */
/* nav */
#nav {
width: 1600px;
height: 50px;
background: #1F1F1F;
}
/* end of nav */
/* index.php */
#course_MainTitle {
font-family: 'Open Sans', sans-serif;
font-size: 24px;
position: relative;
left: 187px;
top: 20px;
}
#nav_logo {
font-family: 'Open Sans', sans-serif;
color: white;
font-size: 20px;
position: relative;
left: 188px;
top: 9px;
}
/* Search Engine */
#search_engine {
background: white;
color: #353535;
outline: none;
width: 500px;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
padding: 7px 30px 7px 10px;
border: none;
border-radius: 3px;
position: relative;
top: 9px;
left: 210px;
}
#search_engine::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: #353535;
}
#search_engine:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #353535;
opacity: 1;
}
#search_engine::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #353535;
opacity: 1;
}
#search_engine:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #353535;
}
/* End of Search Engine */
/* Login & Sign Up */
#login_nav_div,
#signup_nav_div {
float: right;
font-family: 'Open Sans', sans-serif;
color: #353535;
font-size: 17px;
padding: 7px 30px 7px 10px;
border-radius: 3px;
margin-right: 10px;
position: relative;
left: -66px;
background: white;
top: 6px;
}
#login,
#signup {
position: relative;
top: -1px;
left: 9px;
}
/* End of Login & Sign Up */
/* end of index.php */
<!DOCTYPE html>
<html>
<head>
<title>Hacked Genius</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel='stylesheet' href='main.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src='main.js'></script>
<style>
/***********************\
Modal Module - Title CSS FTW
\***********************/
.Modal {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
visibility: hidden;
}
.Modal .content {
position: absolute;
left: 50%;
top: 30%;
width: 390px;
padding: 50px;
border-radius: 3px;
background: #fff;
transform: translate(-50%, -30%) scale(0);
z-index: 50;
}
.Modal .close {
position: absolute;
top: 8px;
right: 8px;
display: block;
width: 18px;
height: 18px;
padding: 2px;
line-height: 18px;
border-radius: 50%;
text-align: center;
cursor: pointer;
background: #C5C5C5;
color: #fff;
}
.Modal .close:before {
content: '\2715';
}
.Modal.is-visible {
visibility: visible;
background: rgba(0, 0, 0, 0.5);
transition: background .35s;
transition-delay: .1s;
z-index: 40;
}
.Modal.is-visible .content {
transform: translate(-50%, -30%) scale(1);
transition: transform .35s;
}
/* Model */
#login_title,
#signup_title {
font-family: 'Open Sans', sans-serif;
font-size: 23px;
letter-spacing: 1px;
position: relative;
top: -20px;
left: 110px;
}
#signup_title {
left: 80px;
}
#login_username,
#login_password,
#signup_username,
#signup_password,
#signup_email {
outline: none;
border: 1px solid #ccc;
color: #353535;
padding: 12px 10px 12px 10px;
border-radius: 3px;
font-size: 16px;
position: relative;
left: -30px;
width: 425px;
font-family: 'Open Sans', sans-serif;
}
#login_username:focus,
#login_password:focus,
#signup_username:focus,
#signup_password:focus,
#signup_email:focus {
border: 1px solid #4096ee;
}
#login_submit,
#signup_submit {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4096ee+0,4096ee+100;Blue+Flat+%232 */
background: #4096ee;
/* Old browsers */
background: -moz-linear-gradient(top, #4096ee 0%, #4096ee 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, #4096ee 0%, #4096ee 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #4096ee 0%, #4096ee 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4096ee', endColorstr='#4096ee', GradientType=0);
/* IE6-9 */
color: white;
text-align: center;
padding: 11px 12px 11px 12px;
font-size: 22px;
width: 445px;
font-weight: normal;
position: relative;
top: 5px;
border-radius: 3px;
float: left;
font-family: 'Open Sans', sans-serif;
border: none;
outline: none;
cursor: pointer;
position: relative;
left: -28px;
font-weight: bold;
}
#login_submit:focus,
#login_submit:hover {
background: rgb(37, 141, 200);
}
/* End of Model */
/* Error Messages */
#login_username_error,
#login_password_error,
#login_failed {
font-family: 'Open Sans', sans-serif;
color: #DD4B39;
position: relative;
left: -30px;
top: -8px;
font-weight: bold;
display: none;
}
/* End of Error Messages */
/* $_SESSION["id"] set */
#user_avatar {
float: left;
width: 28px;
height: 28px;
border-radius: 50%;
position: relative;
top: -2px;
left: -10px;
}
#user_username {
color: white;
float: right;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 16px;
position: relative;
top: -31px;
left: -220px;
text-transform: capitalize;
padding: 10px;
}
/* Drop Down */
.dropdown_content {
display: none;
position: absolute;
background: white;
color: #555;
border: 1px solid #DEDEDE;
border-top: none;
min-width: 220px;
/* left: 1250px;
top: 47px; */
border-radius: 3px;
z-index: 10;
font-family: 'Open Sans', sans-serif;
font-weight: normal;
top: 44px;
left: -125px;
}
.dropdown_content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: 16px;
}
.dropdown_content a:hover {
color: #4096EE;
}
.dropdown:hover .dropdown_content {
display: block;
}
#dropdown_caret {
color: white;
position: absolute;
top: -10px;
left: 135px;
}
#login_label {
font-family: 'Open Sans', sans-serif;
cursor: pointer;
padding: 5px 5px 5px 20px;
}
#login_remember,
#login_label {
position: relative;
top: 25px;
left: -30px;
}
#login_label {
left: -52px;
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-khtml-user-select: none;
/* Konqueror */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
not supported by any browser */
}
a #forgot_password {
color: black;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
position: relative;
top: 25px;
left: 120px;
}
a #forgot_password:hover {
text-decoration: underline;
}
#login_line,
#signup_line {
background: #ccc;
height: 1px;
width: 490px;
position: relative;
top: 25px;
left: -50px;
}
#signup_line {
top: 78px;
}
#login_crossSection,
#signup_crossSection {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: black;
position: relative;
top: 37px;
left: 90px;
}
#login_crossSection a,
#signup_crossSection a {
color: #4096EE;
cursor: pointer;
}
#login_crossSection a:hover,
#signup_crossSection a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<!-- Login Popup -->
<div id="Popup" class="Modal">
<div class="content">
<span id='login_title'> Welcome Back </span>
<br>
<form action='' method='post'>
<span id='login_failed'></span>
<input id='login_username' placeholder='Username' name='login_username'>
<br>
<br>
<span id='login_username_error'></span>
<input id='login_password' placeholder='Password' name='login_password' type='password'>
<br>
<br>
<span id='login_password_error'></span>
<input type='button' value='Login' id='login_submit' onclick='checkErrors()'>
</form>
<!-- Remember Me -->
<input type='checkbox' name='login_remember' id='login_remember'>
<label for='login_remember' id='login_label'>Remember Me</label>
<!-- End of Remember Me -->
<!-- Forgot Password? -->
<a href='#'> <span id='forgot_password'> Forgot Password? </span>
</a>
<br>
<br>
<!-- End of Forgot Password -->
<!-- Cross Section -->
<div id='login_line'></div>
<span id='login_crossSection'> Not a member yet? <a href='#'> Sign Up </a> </span>
<!-- End of Cross Section -->
<span class="close"></div>
</div>
<!-- End of Login Popup -->
<!-- Sign Up Popup -->
<!-- Sign Up Popup -->
<div id="Popup2" class="Modal">
<div class="content">
<span id='signup_title'> Ready for awesome? </span>
<br>
<form action='' method='post'>
<span id='signup_failed'></span>
<input id='signup_username' placeholder='Username' name='signup_username'>
<br>
<br>
<span id='signup_username_error'></span>
<input id='signup_email' placeholder='Email' name='signup_email'>
<br>
<br>
<span id='signup_email_error'></span>
<input id='signup_password' placeholder='Password' name='signup_password' type='password'>
<br>
<br>
<span id='signup_password_error'></span>
<input type='button' value='Sign Up' id='signup_submit' onclick='checkErrors()'>
</form>
<!-- Cross Section -->
<div id='signup_line'></div>
<span id='signup_crossSection'> Already a member? <a href='#'> Login </a> </span>
<!-- End of Cross Section -->
<span class="close"></div>
</div>
<!-- End of Sign Up Popup -->
<!-- End of Sign Up Popup -->
<!-- nav -->
<div id='nav'>
<a href='index.php'> <span id='nav_logo'> Logo </span>
</a>
<!-- Search Engine -->
<input id='search_engine' placeholder='Search Courses'>
<!-- End of Search Engine -->
<!-- Sign Up -->
<a href='#Popup2' class='button'>
<div id='signup_nav_div'>
<span id='signup'> Sign Up </span>
</div>
</a>
<!-- End of Sign Up -->
<!-- Login -->
<a href='#Popup' class='button'>
<div id='login_nav_div'>
<span id='login'> Login </span>
</div>
</a>
<!-- End of Login -->
} ?>
</div>
<!-- end of nav -->
<script>
$.fn.expose = function(options) {
var $modal = $(this),
$trigger = $('a[href="' + this.selector + '"]');
$modal.on("expose:open", function() {
$modal.addClass("is-visible");
$modal.trigger("expose:opened");
});
$modal.on("expose:close", function() {
$modal.removeClass("is-visible");
$modal.trigger("expose:closed");
});
$trigger.on("click", function(e) {
e.preventDefault();
$modal.trigger("expose:open");
});
$modal.on("click", function(e) {
if ($(e.target).is($modal) || $(e.target).is('.close')) {
e.preventDefault();
$modal.trigger("expose:close");
}
});
return;
}
// Example Cancel Button
$("#login_nav_div").click(function() {
$("#Popup").expose();
});
$("#signup_nav_div").click(function() {
$("#Popup2").expose();
});
$("#login_crossSection a").click(function() {
$("#Popup").trigger('expose:close');
$("#Popup2").trigger('expose:open');
});
$("#signup_crossSection a").click(function() {
$("#Popup2").trigger('expose:close');
$("#Popup").trigger('expose:open');
});
$(".cancel").on("click", function(e) {
console.log('a')
e.preventDefault();
$(this).trigger("expose:close");
});
// Example Callbacks
/*
$("#Popup").on("expose:opened", function() {
alert("Modal Opened!");
});
$("#Popup").on("expose:closed", function() {
alert("Modal Closed!");
});
*/
function checkErrors() {
if ($("#login_remember").is(":checked")) {
var checked = 1;
} else {
checked = 0;
}
var login_username_val = $("#login_username").val().length;
var login_password_val = $("#login_password").val().length;
var login_username = $("#login_username").val();
var login_password = $("#login_password").val();
if (login_username_val < 1) {
$("#login_username_error").show().text("Username Required");
$("#login_failed").hide();
$("#login_username").css("border", "1px solid #DD4B39");
} else {
$("#login_username_error").hide();
$("#login_username").css("border", "");
}
if (login_password_val < 1) {
$("#login_password_error").show().text("Password Required");
$("#login_failed").hide();
$("#login_password").css("border", "1px solid #DD4B39");
} else {
$("#login_password_error").hide();
$("#login_password").css("border", "");
}
if (login_password_val > 0 && login_username_val > 0) {
$.post("check.php?checked=" + checked, {
username: login_username,
password: login_password
}, function(data) {
if (data == "Login Worked") {
location.reload();
}
if (data == "Login Failed") {
$("#login_failed").show().text("Login Failed");
}
});
}
}
</script>
</body>

MMhunter was not far... It's an initialisation thing.
I noticed that the "not appearing popup" was triggered... But didn't have the ".is-visible" class.
I played around a little... And found it:
$("#login_crossSection a").click(function() {
console.log("Clicked signup from login");
$("#Popup2").expose(); // Added
$("#Popup").trigger('expose:close');
$("#Popup2").trigger('expose:open');
});
$("#signup_crossSection a").click(function() {
console.log("Clicked login from signup");
$("#Popup").expose(); // Added
$("#Popup2").trigger('expose:close');
$("#Popup").trigger('expose:open');
});
Added these two lines... And it work.

It seems u need to call make both popups call expose() before trigger events on them.
In ur code ur popup modals are initialised (call expose()) only when user click on 'Login' or 'sign up' buttons.
One simple solution is just do the initialization when document is ready:
Just Change:
$("#login_nav_div").click(function() {
$("#Popup").expose();
});
$("#signup_nav_div").click(function() {
$("#Popup2").expose();
});
to:
$(document).ready(function(){
$("#Popup").expose();
$("#Popup2").expose();
})