Modal not working properly, CSS not populating, broken

Question

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()'>&times;</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">&times;</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";
    }
   }
  }

csp713 · Accepted Answer

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">&times;</span>
        <div id="confirmCartPopUpBody"></div>
    </div>
</div>

and js:

document.getElementById('confirmCartPopUpBody').innerHTML =

Modal not working properly, CSS not populating, <span> broken

Tags:

javascript

html

css

Robin

1 Answers

csp713

Recent Activity

Donate For Us