写HTML js特效 弹窗 背景暗化 兼容IE浏览器

以下是一个基本的HTML页面，其中包含一个按钮，点击按钮时会弹出一个弹窗，并且背景会暗化。这段代码兼容IE浏览器。

<!DOCTYPE html>
<html>
<head>
<style>
.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.popup-content {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  z-index: 10000;
}

.popup-content h2 {
  margin-top: 0;
}

.popup-content button {
  margin-top: 10px;
}

</style>
</head>
<body>

<button onclick="openPopup()">打开弹窗</button>

<div id="popup-overlay" class="popup-overlay"></div>
<div id="popup-content" class="popup-content">
  <h2>这是一个弹窗</h2>
  <button onclick="closePopup()">关闭</button>
</div>

<script>
function openPopup() {
  document.getElementById("popup-overlay").style.display = "block";
  document.getElementById("popup-content").style.display = "block";
}

function closePopup() {
  document.getElementById("popup-overlay").style.display = "none";
  document.getElementById("popup-content").style.display = "none";
}
</script>

</body>
</html>

这个页面使用了两个div元素，一个是用于背景暗化的popup-overlay，另一个是弹窗的内容popup-content。当点击按钮时，通过JavaScript的openPopup函数来显示这两个元素，关闭弹窗时通过closePopup函数来隐藏这两个元素。通过设置display: none来控制元素的显示和隐藏。

注意，以上代码是基本的实现，你可以根据自己的需求来进行样式和功能的调整

写HTML js特效 弹窗 背景暗化 兼容IE浏览器

写HTML js特效弹窗背景暗化兼容IE浏览器