So I've created a POS with pop-up modals, the initial issue was that the code that I sampled from W3Schools had only one modal, while my POS has two. When I would go to open one modal, both modals would appear. I have solved that problem, but now only the first modal is working properly. I have modeled the second modal after the first but the × is not appearing and the .modal-content and .close CSS are not populating on the page when I go to inspect. PLEASE HELP!
Here is what my code is based off of: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal
Here's the snipet of HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close"><a onclick='dataBind()'>×</a></span>
<div id="productName"></div>
<p id="stock"></p>
<p id="id"></p>
</div>
</div>
<!--Modal 2-->
<div id="confirmCartPopUp" class="modal-2">
<!--Modal 2 content-->
<div class="modal-content">
<span class="close-modal-2">×</span>
</div>
</div>
<script src="dynamic.js">
</script>
<script src="main.js">
</script>
</body>
</html>
The subsequent CSS:
.modal, .modal-2, .modal-3 {
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-2-content,.modal-3-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close, .close-modal-2, .close-modal-3 {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close, .close-modal-2, .close-modal-3:hover,
.close, .close-modal-2, .close-modal-3:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
JavaScript:
*FIRST MODAL-->*
function manageInventory(id, productName, stock) {
var span = document.getElementsByClassName("close")[0];
var modal = document.getElementById('myModal');
modal.style.display = "block";
document.getElementById('stock').innerHTML = stock;
document.getElementById('productName').innerHTML =
"<p> Update the physical inventory for " + productName + " by using the '+' or '-' below...</p>" +
"<p><button type='submit' formmethod='post' onclick='addInventory()'>+</button>" +
"<button type='submit' formmethod='post' onclick='deleteInventory()'>-</button>"; +
"<label id='stock'></label>"
localStorage.setItem('id', id);
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}
*SECOND MODAL-->*
function confirmCartAdd(productName, img, price) {
var span = document.getElementsByClassName("close")[0];
var modal2 = document.getElementById('confirmCartPopUp');
modal2.style.display = "block";
document.getElementById('confirmCartPopUp').innerHTML =
"<p> Do you wish to add this product to your cart?</p>" +
"<p>" + img + "</p>" +
"<p><button type='submit' formmethod='post' onclick='addToCart()'>Yes, add it to my cart.</button>" +
"<button>No, continue shopping</button>";
span.onclick = function() {
modal2.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal2) {
modal2.style.display = "none";
}
}
}
2 Answers 2
I think document.getElementById('confirmCartPopUp').innerHTML = ... might be the problem. You are writing over the content of modal 2. Maybe put a placeholder element inside of the modal 2 content div, and put the js-generated HTML in there.
Such as:
<!--Modal 2-->
<div id="confirmCartPopUp" class="modal-2">
<!--Modal 2 content-->
<div class="modal-content">
<span class="close-modal-2">×</span>
<div id="confirmCartPopUpBody"></div>
</div>
</div>
and js:
document.getElementById('confirmCartPopUpBody').innerHTML =
Sign up to request clarification or add additional context in comments.
1 Comment
Robin
Yeah, this was the issue! I can't believe I didn't see it. Thanks!
you missing to thing you did not user and contain in second modal where you want to assign you dynamic value. and close class
<!-- The Modal -->
<button onclick='manageInventory("1", "created a POS", "11")'>Open Modal</button>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close"><a onclick='dataBind()'>×</a>
</span>
<div id="productName"></div>
<p id="stock"></p>
<p id="id"></p>
</div>
</div>
<!--Modal 2-->
<button onclick='confirmCartAdd("sampled", " that the code ", "122")'>Open Modal</button>
<div id="confirmCartPopUp" class="modal-2">
<!--Modal 2 content-->
<div class="modal-content">
<span class="close-modal-2">×</span>
<div id="confirmCartAdd"></div>
</div>
</div>
<script>
function manageInventory(id, productName, stock) {
var span = document.getElementsByClassName("close")[0];
var modal = document.getElementById('myModal');
modal.style.display = "block";
document.getElementById('stock').innerHTML = stock;
document.getElementById('productName').innerHTML =
"<p> Update the physical inventory for " + productName + " by using the '+' or '-' below...</p>" +
"<p><button type='submit' formmethod='post' onclick='addInventory()'>+</button>" +
"<button type='submit' formmethod='post' onclick='deleteInventory()'>-</button>"; +
"<label id='stock'></label>"
localStorage.setItem('id', id);
span.onclick = function () {
modal.style.display = "none";
}
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}
function confirmCartAdd(productName, img, price) {
var span = document.getElementsByClassName("close-modal-2")[0];
var modal2 = document.getElementById('confirmCartPopUp');
modal2.style.display = "block";
document.getElementById('confirmCartAdd').innerHTML =
"<p> Do you wish to add this product to your cart?</p>" +
"<p>" + img + "</p>" +
"<p><button type='submit' formmethod='post' onclick='addToCart()'>Yes, add it to my cart.</button>" +
"<button>No, continue shopping</button>";
span.onclick = function () {
modal2.style.display = "none";
}
window.onclick = function (event) {
if (event.target == modal2) {
modal2.style.display = "none";
}
}
}
</script>
Comments
default