模态无法正常工作，CSS 未填充， <span> 损坏

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

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

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

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

我认为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 =

您缺少未使用的东西，并包含在要分配动态值的第二种模态中。和关闭类

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

相关内容

最新更新

热门标签：