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

How to execute this Javascript code in React?

I am making an app using React framework.
So the problem I have here is that I want to execute this JS code in React. It is basically supposed to dynamically show and hide the <div>. Here is the code in the <script> tag which I want to run using React:
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
</script>
And here is the css -
body {font-family: Arial, Helvetica, sans-serif;}
/* 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.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
And HTML -
<h2>Modal Example</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
I saw in many tutorials that the componentDidMount helps. But it is not working. Also, I find that componentDidMount is quite complicated. So is there an alternative way to run this JS code in React?

Ok, this should get You started. Your plain html/js transforms approximately to this. (css left as is)
class MyModalApp extends React.Component {
constructor(props) {
super(props);
this.state = {showModal: false};
this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this);
}
openModal() {
this.setState({showModal: true});
}
closeModal() {
this.setState({showModal: false});
}
render() {
const style= this.state.showModal ? {display: "block"} : {display: "none"};
return (
<div>
<h2>Modal Example</h2>
{/* <!-- Trigger/Open The Modal --> */}
<button id="myBtn" onClick={() => this.openModal()}>Open Modal</button>
{/* <!-- The Modal --> */}
<div id="myModal" class="modal" style={style}>
{/* <!-- Modal content --> */}
<div class="modal-content">
<span class="close" onClick={() => this.closeModal()}>×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</div>
);
}
}
ReactDOM.render(
<MyModalApp />,
document.getElementById('root')
);
body {font-family: Arial, Helvetica, sans-serif;}
/* 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.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

How to add google map in an iframe tag

I want to show a map direction to the user and I want to show this map in a popup iframe tag. How we can show this map in iframe tag
Here is the link which I want to show in iframe tag in my code
I do not know why this is not working. Thanks in advance for your great thoughts
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
<style>
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
/* Extra styles for the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
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 */
padding-top: 10px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
height:auto;
}
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
#keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">View Map Direction</button>
<div id="id01" class="modal">
<form class="modal-content animate" action="action_page.php">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<iframe src="https://www.google.com/maps/dir/31.5282618,74.3234164/University+of+South+Asia,+47+Tufail+Rd,+Lahore/#31.5308165,74.3164608,13z/data=!3m1!4b1!4m10!4m9!1m1!4e1!1m5!1m1!1s0x3919050d90b4fac3:0xa46dbb2def95e45a!2m2!1d74.3781741!2d31.5328815!3e"></iframe>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
</div>
</form>
</div>

In your case you are trying to load map in iframe and iframs's 'X-Frame-Option' is set to 'SAMEORIGIN'. so it is not load in iframe.
You can't set X-Frame-Options on the iframe. That is a response header set by the domain from which you are requesting the resource (www.google.com in your example). They have set the header to SAMEORIGIN in this case, which means that they have disallowed loading of the resource in an iframe outside of their domain. For more information see The X-Frame-Options response header on MDN.
You can add map in iframe using below link:
How to load a Google Map in an iframe with Javascript?

You can simply add the embedded link of a place from the google map in the src.
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3945.5366640845264!2d76.93905241410239!3d8.544280398746274!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3b05b96a8025dc21%3A0x433a8ad4eeb21137!2sB-Hub!5e0!3m2!1sen!2sin!4v1551781850948" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

My data-backdrop does not work

I have looked at other options with the data-backdrop to prevent the model from closing when clicking outside of the close button. Perhaps it could be that I add the backdrop to the wrong piece of code but I was hoping you could help me on this.
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1670;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
padding-bottom: 20px;
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: scroll;
/* Enable scroll if needed */
overflow-x: hidden;
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
}
/* home page special button Content */
.special-content {
width: 80%;
height: auto;
background-color: #CCCCCC;
margin-left: 10%;
margin-right: 10%;
border-radius: 10px;
display: block;
}
/* The Close Button */
.close {
position: absolute;
top: 50px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #755378;
text-decoration: none;
cursor: pointer;
}
<a class="Star-btn" href="#" style="text-decoration:none;" onclick="onClick(this)">Specials</a>
<div id="modal01" class="modal" onclick="this.style.display='none'" data-backdrop="static" data-keyboard="false">
<span class="close">×</span>
<div class="special-content">
<p id="img01" class="TextHome" alt="">random inforomation.</p>
</div>
</div>
It is probably an easy fix or something small that needs to be added but I can't seem to manage, I would appreciate any help
Regards
Francois

$(document).ready(function(){
$(".Star-btn").click(function(){
$("#modal01").css({"display":"block"});
});
$(".close").click(function(){
$("#modal01").css({"display":"none"});
});
});
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1670;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
padding-bottom: 20px;
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: scroll;
/* Enable scroll if needed */
overflow-x: hidden;
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
}
/* home page special button Content */
.special-content {
width: 80%;
height: auto;
background-color: #CCCCCC;
margin-left: 10%;
margin-right: 10%;
border-radius: 10px;
display: block;
}
/* The Close Button */
.close {
position: absolute;
top: 50px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #755378;
text-decoration: none;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="Star-btn" href="#" style="text-decoration:none;">Specials</a>
<div id="modal01" class="modal">
<span class="close">×</span>
<div class="special-content">
<p id="img01" class="TextHome" alt="">random inforomation.</p>
</div>
</div>

Bring modal to front

Hey I am trying to bring this modal infront of the other elements on the page.
I already tried z-index: -1.
I would like to then implement this code on a adobe muse website and make the modal get an element from the selection of a combobox.
Thank you for your help.
<!DOCTYPE html>
<html>
<head>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; front; /* Stay in place */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 600px; /* 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 */
z-index: 1; /* Sit on top */
}
/* Modal Content */
.modal-content {
background-color: #00A1E0;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 511px;
height: 250px;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #blue;
text-decoration: none;
cursor: pointer;
</style>
<body>
<style>
div.background {
border: 0px solid black;
div {
background-color: #00A1E0;
width: 511px;
}
}
div.transbox {
margin: 30px;
background-color: #00A1E0;
border: 1px solid black;
opacity: 15%;
width: 511;
filter: alpha(opacity=100);
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Add to shopping card
<div class="background">
<div class="transbox">
<style>
#myBtn { color: #00A1E0; }
div.background {
border: 0px #00A1E0;
div {
background-color: #00A1E0;
width: 511px;
}
}
div.transbox {
margin: 30px;
background-color: #FF530D;
color: #00A1E0;
opacity: 80%;
width: 200;
filter: alpha(opacity=100);
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #00A1E0;
}
#myModal { background: ; }
</style>
</button>
</div>
</head>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>you have added the classic business cards to the shopping cart</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[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";
}
}
{
document.getElementById("resultSection").style.fontSize = "350%";
document.getElementById("resultSection").innerHTML = "<H2></H2> " + result;
}
</script>
<style> #myBtn {
position: relative;
font-size: 34px;
}
</style>
</body>
</html>

Try this - comments amended to show what I have changed
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place front is invalid - may break your css so removed */
padding-top: 100px; /* Location of the box - don't know what this does? If it is to move your modal down by 100px, then just change top below to 100px and remove this*/
left: 0;
right:0; /* Full width (left and right 0) */
top: 0;
bottom: 0; /* Full height top and bottom 0 */
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 */
z-index: 9999; /* Sit on top - higher than any other z-index in your site*/
}
You also have a missing end bracket from your .close:hover and focus and you seem to have a nested style within div.background - unless you are using a css pre-processor, then this is invalid css