javascript - 如何制作可以用 x 按钮关闭的广告横幅？

Question

这是我试过的，不起作用。我的网页上的结果是底部的空白 div。我希望当广告显示关闭时，CSS会使页面变暗。但事实并非如此。

function adTimer() {
  setTimeout(banner, 5000);
}
var btn = document.querySelector('#btn-dismiss')
btn.addEventListener("click", function() {
  bannerad = document.querySelector('#darken');
  bannerad.style.display = 'none';
  document.querySelector("html").classList.remove("darkenPage");
});

function banner() {
  btn.innerhtml = "x";
  bannerad.innerhtml = "Click here to go to our request page";
  document.Banner.src = 'images/banner.jpg';
  document.querySelector("html").classList.add("darkenPage");
}

var image = new image();
image.src = 'images/banner.jpg';

html.darken {
  background-color: black;
}

html.darkenP body {
  opacity: 0.5;
}

<div align="center">
  <div id="banner-ad">
    <img width="400px" height="400px" style="border-radius:40px; font-size:40px;" name="Banner" />
    <button id="btndismiss"></button>
  </div>
</div>

标签： javascripthtmlcss

Answer 1

我已经重新开始并得到了我想要的东西。这是我使用的 JavaScript：

var modal = document.getElementById("myModal");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
window.onload = function() {
  setTimeout(function (){modal.style.display="block";},5000);
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

这是我使用的html：

<div id="myModal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>texxt</h2>
    </div>
    <div class="modal-body">
      <p>text</p>
      <p>text</p>
    </div>
    <div class="modal-footer">
      <h3>footer text</h3>
    </div>
  </div>
</div>