写个JS特效 HTML 自动弹窗 背景暗化 兼容IE

以下是一个使用JS特效实现HTML自动弹窗并背景暗化的例子，兼容IE浏览器：

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>自动弹窗特效</title>
  <style>
    /* 弹窗样式 */
    #popup {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 400px;
      padding: 20px;
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      z-index: 9999;
    }
    
    /* 背景暗化样式 */
    #overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 9998;
    }
  </style>
</head>
<body>
  <h1>点击按钮触发弹窗</h1>
  
  <button id="openButton">打开弹窗</button>
  
  <div id="popup">
    <h2>弹窗标题</h2>
    <p>弹窗内容</p>
    <button id="closeButton">关闭弹窗</button>
  </div>
  
  <div id="overlay"></div>
  
  <script src="script.js"></script>
</body>
</html>

JavaScript代码（script.js）：

// 获取DOM元素
var openButton = document.getElementById('openButton');
var closeButton = document.getElementById('closeButton');
var popup = document.getElementById('popup');
var overlay = document.getElementById('overlay');

// 打开弹窗
openButton.onclick = function() {
  popup.style.display = 'block';
  overlay.style.display = 'block';
}

// 关闭弹窗
closeButton.onclick = function() {
  popup.style.display = 'none';
  overlay.style.display = 'none';
}

这个例子中，点击按钮会触发弹窗的打开，弹窗会显示在屏幕中央，同时背景会被暗化。点击弹窗中的关闭按钮，弹窗会关闭并恢复背景。

这个特效通过设置弹窗的display属性来控制弹窗的显示与隐藏，通过设置背景的display属性来控制背景的显示与隐藏。在打开弹窗时，同时设置弹窗和背景的display属性为'block'，关闭弹窗时，设置弹窗和背景的display属性为'none'。这样就可以实现弹窗的显示与隐藏以及背景的暗化效果。

由于使用了基本的CSS和DOM操作，这个特效在兼容大部分现代浏览器的同时，也兼容IE浏览器

写个JS特效 HTML 自动弹窗 背景暗化 兼容IE

写个JS特效 HTML 自动弹窗背景暗化兼容IE