Question

页面加载时，我正在打开模式，并且该部分工作正常。问题是，当我单击它关闭时，它也会擦除父页面。看看我的小提琴。

<head>
<script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://codeorigin.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
</head>
<style>
.cookieBtn {
  font-size: 12px;
  cursor: pointer;
  background-color: #A02525;
  color: white;
  padding: 5px 5px;
  border: none;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  border-radius: 5px;
}

.cookieBtn:hover {
  background-color: #761010;
}

.cookieWrapper {
  border-radius: 10px;
  background-color: white;
  width: 400px;
  height: 175px;
  padding: 10px;
  -webkit-box-shadow: 0px 0px 39px 12px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 39px 12px rgba(0,0,0,0.75);
   box-shadow: 0px 0px 39px 12px rgba(0,0,0,0.75);
   z-index: 999;
   }
   </style>
   <body>
   <p>text on page</p>

   <div id="cookieWrapper" class="cookieWrapper" title="Dialog" onClick="parentNode.remove()" align="center">
   <iframe src="rndcookie.asp" width="392" height="150" scrolling="no" frameborder="0" style="border-radius: 10px;"></iframe>
   <button class="cookieBtn" onclick="" data-dismiss="cookieWrapper" type="button">ACCEPT ALL COOKIES</button>
   </div>

   <script>
    window.onload = function () {
     document.getElementById('button').onclick = function () {
      document.getElementById('cookieWrapper').style.display = "none"
   };
};
</script>

Answer 1

有2个问题：

您没有ID为button的元素
您的<p>标签和其他标签消失的原因是由于onClick="parentNode.remove()"

演示

window.onload = function() {
  document.getElementById('button').onclick = function() {
    document.getElementById('cookieWrapper').style.display = "none"
  };
};

.cookieBtn {
  font-size: 12px;
  cursor: pointer;
  background-color: #A02525;
  color: white;
  padding: 5px 5px;
  border: none;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

.cookieBtn:hover {
  background-color: #761010;
}

.cookieWrapper {
  border-radius: 10px;
  background-color: white;
  width: 400px;
  height: 175px;
  padding: 10px;
  -webkit-box-shadow: 0px 0px 39px 12px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 39px 12px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 39px 12px rgba(0, 0, 0, 0.75);
  z-index: 999;
}

<script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://codeorigin.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>

<body>
  <p>text on page</p>

  <div id="cookieWrapper" class="cookieWrapper" title="Dialog"  align="center">
    <iframe src="rndcookie.asp" width="392" height="150" scrolling="no" frameborder="0" style="border-radius: 10px;"></iframe>
    <button class="cookieBtn" id="button" onclick="" data-dismiss="cookieWrapper" type="button">ACCEPT ALL COOKIES</button>
  </div>

在不破坏父对象的情况下似乎无法关闭此模式吗？

1 个答案: