Question

所以我创建了一个带有弹出模式的POS，最初的问题是我从W3Schools采样的代码只有一个模态，而我的POS有两个。当我打开一个模态时，两个模态都会出现。我已经解决了这个问题，但现在只有第一个模态才能正常工作。我已经在第一个模式之后建模了第二个模态但是×没有出现，并且当我去检查时，页面上没有填充.modal-content和.close CSS。请帮助！

以下是我的代码基于：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal

这是HTML的snipet：

    <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>

后续的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";
    }
   }
  }

Answer 1

我认为document.getElementById('confirmCartPopUp').innerHTML = ...可能是问题所在。您正在编写模态2的内容。可能将一个占位符元素放在模态2内容div中，并将js生成的HTML放在那里。

如：

<!--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>

和js：

document.getElementById('confirmCartPopUpBody').innerHTML =

Answer 2

您错过了您没有使用的东西，并且在第二个模态中包含您要为其分配动态值的东西。并关闭班级

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

模态不能正常工作，CSS没有填充，<span>已损坏

2 个答案: