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";
}
}

Scroll to top functionality not working on Firefox

I am using this
$(function() {
$('<button onclick="topFunction()" id="topBtn" title="Go to top"></button>').insertAfter('div#mw-content-text');
});
// When users scroll down 100px, show the Top button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
document.getElementById("topBtn").style.display = "block";
} else {
document.getElementById("topBtn").style.display = "none";
}
}
// When users click on Top button, scroll up
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
Which works fine on all browsers apart from Firefox. In this case, it is displayed in the middle of the screen and does not stick at the bottom right when scrolling.
The css I use is this:
#topBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 16px;
border: none;
outline: none;
background-color: rgba(0, 0, 0, 0.3);
color: white;
cursor: pointer;
padding: 20px;
border-radius: 4px;
}
#topBtn:hover {
background-color: #555;
}
#topBtn:before {
position: fixed;
bottom: 2px;
right: 36px;
color: #fff;
font-size: 42px;
font-family: 'Georgia';
content: "^";
font-weight: 600;
}
Reference page: https://lsj.gr/wiki/%CE%BB%CE%BF%CF%8D%CF%89

You need to add position: fixed; to the button. Then you can position it with left, right, bottom and top.
$(function() {
$('<button onclick="topFunction()" id="topBtn" title="Go to top">Click</button>').insertAfter('div#mw-content-text');
});
#mw-content-text {
height: 100px;
width: 100px;
background: green;
}
#topBtn {
position: fixed;
right: 30px;
bottom: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mw-content-text"></div>

Transparent Navbar not becoming transparent after onscroll function

So, I am preparing for a Web Designing Competition and I was testing out a transparent navbar that will become White if pageYOffset is greater than 100, but now, when i scroll back in the 100px range, the navbar remains white.
Here's my code
window.onscroll = function() {
var navbar = document.getElementsByClassName('navbar')[0];
if (window.pageYOffset > 100) {
navbar.style.background = "#fff";
} else {
navbar.style.background = "transparent";
}
}
.navbar {
height: 50px;
width: 100%;
font-family: Arial;
position: fixed;
background: transparent;
color: #fff;
top: 0;
left: 0;
}
.navbar h3 {
float: left;
margin-left: 30px;
margin-top: 20px;
}
.navbar a {
float: right;
padding: 18px;
margin-right: 30px;
text-decoration: none;
color: #333;
}
/** FOR TESTING IN SNIPPET */
body {
height: 1000px;
background: red;
}
<div class="navbar">
<h3>OmniFoods</h3>
Home
About
Contact
</div>

How Do I Toggle Tabs in JQuery

I am trying to create a tabbed content area which opens and closes each section. My HTML is as follows:
<div class="more-info">
<p>HELLO</p>
</div>
<div class="more-info">
<p>GOODBYE</p>
</div>
The JQuery is
$("a.toggle").click(function () {
$(this).find(".more-info").slideToggle("slow");
});
and my styles are :
a.open {display:block; width:30px; height:30px; background:#999;}
.more-info {display:none; width:100%;}
The idea is to click on the a link and open the it's content box. How do I do this? Doesn't seem to work? The only thing is I can't use unique IDs as the way the page will be created. Therefore, this has to work on a generic class.

You need to slide the required section down and any currently open section up.
Try :
$("a.toggle").on('click', function (e) {
e.preventDefault();
var $section = $(this).next(".more-info").slideDown("slow");
$(".more-info").not($section).slideUp("fast");
});

Try this :
$("a.toggle").on('click', function (e) {
e.preventDefault();
var $a = $(this).next(".more-info");
if($a.is(':visible')){
$a.hide();
}else{
$a.show();
}
});

Check this well designed toggle effect
$('#ce-toggle').click(function(event) {
$('.plan-toggle-wrap').toggleClass('active');
});
$('#ce-toggle').change(function(){
if ($(this).is(':checked')) {
$('.tab-content #yearly').hide();
$('.tab-content #monthly').show();
}
else{
$('.tab-content #yearly').show();
$('.tab-content #monthly').hide();
}
});
body{
margin:0;
}
.plan-toggle-wrap {
text-align: center;
padding: 10px;
background-color: rgb(75,88,152);
position:sticky;
top:0;
}
.toggle-inner input {
position: absolute;
left: 0;
width: 100%;
height: 100%;
margin: 0;
border-radius: 25px;
right: 0;
z-index: 1;
opacity: 0;
cursor: pointer;
}
.custom-toggle {
position: absolute;
height: 25px;
width: 25px;
background-color: #ffffff;
top: 4px;
left: 5px;
border-radius: 50%;
transition: 300ms all;
}
.toggle-inner .t-month, .toggle-inner .t-year {
position: absolute;
left: -70px;
top: 5px;
color: #ffffff;
transition: 300ms all;
}
.toggle-inner .t-year {
left: unset;
right: -85px;
opacity: 0.5;
}
.active > .toggle-inner .t-month {
opacity: 0.5;
}
.active > .toggle-inner .t-year {
opacity: 1;
}
.toggle-inner input:checked + span {
left: 43px;
}
.toggle-inner {
width: 75px;
margin: 0 auto;
height: 35px;
border: 1px solid #ffffff;
border-radius: 25px;
position: relative;
}
.tab-content > div {
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(94,110,191);
color: #fff;
height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="plan-toggle-wrap">
<div class="toggle-inner">
<input id="ce-toggle" type="checkbox">
<span class="custom-toggle"></span>
<span class="t-month">Yearly</span>
<span class="t-year">Monthly</span>
</div>
</div>
<div class="tab-content">
<div id="monthly">MONTHLY</div>
<div id="yearly">YEARLY</div>
</div>
https://codepen.io/Vikaspatel/pen/yRQrpZ

jQuery toggle fade: Can't get div to fade out/in on toggle

When I click on the black button, the red div fades out and the blue div fades in. However, when I click the black button a second time to switch it back, there is no fade out/in. How can I make it so that the blue div fades out and the red div fades back in?
Fiddle: http://jsfiddle.net/ddac5391/1/
HTML
<a id="contact-button" href="#">Get in touch</a>
<div id="primary"></div>
<div id="contact-keebs"></div>
CSS
#contact-button {
background: #000;
background-size: 24px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
padding: 10px 20px;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
#primary {
background: red;
height: 200px;
position: absolute;
width: 200px;
}
#contact-keebs {
background: blue;
display: none;
height: 200px;
position: absolute;
width: 200px;
}
JS
var c = 0;
$('#contact-button').click(function (e) {
e.preventDefault();
if (c++ % 2 == 0) {
$(this).addClass('work-button').text('Work');
$('body').addClass('contact-content');
$('#contact-keebs').stop().fadeIn(500).show();
} else {
$(this).removeClass('work-button').text('Get in touch');
$('body').removeClass('contact-content');
$('#contact-keebs').stop().fadeOut(500).hide();
}
});

Remove the .show() and .hide(); and to let the fadeIn/fadeOut animation complete(before stopping the animation) use .finish() before .stop().
If you don't use .finish(), the divs will sometimes stuck at a point where their opacity is not 1. Demo(try clicking rapidly) demonstrating this.
$('#contact-keebs').finish().stop().fadeIn(500);
and
$('#contact-keebs').finish().stop().fadeOut(500);
Updated Fiddle
Complete Demo:
var c = 0;
$('#contact-button').click(function(e) {
e.preventDefault();
if (c++ % 2 == 0) {
$(this).addClass('work-button').text('Work');
$('body').addClass('contact-content');
$('#contact-keebs').finish().stop().fadeIn(500);
} else {
$(this).removeClass('work-button').text('Get in touch');
$('body').removeClass('contact-content');
$('#contact-keebs').finish().stop().fadeOut(500);
}
});
#contact-button {
background: #000;
background-size: 24px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
padding: 10px 20px;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
#primary {
background: red;
height: 200px;
position: absolute;
width: 200px;
}
#contact-keebs {
background: blue;
display: none;
height: 200px;
position: absolute;
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="contact-button" href="#">Get in touch</a>
<div id="primary"></div>
<div id="contact-keebs"></div>

I fix it. You don't need to add show and hide after the fadeOut, fadeIn : http://jsfiddle.net/ddac5391/6/
if (c++ % 2 == 0) {
$(this).addClass('work-button').text('Work');
$('body').addClass('contact-content');
$('#contact-keebs').stop().fadeIn(500);
} else {
$(this).removeClass('work-button').text('Get in touch');
$('body').removeClass('contact-content');
$('#contact-keebs').stop().fadeOut(500);
}

It should be $('#contact-keebs').stop().fadeOut(500).show();