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

以下是一个使用HTML和JavaScript实现自动弹窗和背景暗化的示例代码，兼容IE浏览器：

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>自动弹窗示例</title>
    <style>
        #overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
        }

        #popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            display: none;
        }
    </style>
</head>
<body>
    <button onclick="showPopup()">显示弹窗</button>
    <div id="overlay"></div>
    <div id="popup">
        <h1>弹窗标题</h1>
        <p>这是一个自动弹窗示例。</p>
        <button onclick="hidePopup()">关闭</button>
    </div>

    <script src="script.js"></script>
</body>
</html>

JavaScript代码（script.js）：

function showPopup() {
    var overlay = document.getElementById('overlay');
    var popup = document.getElementById('popup');

    overlay.style.display = 'block';
    popup.style.display = 'block';
}

function hidePopup() {
    var overlay = document.getElementById('overlay');
    var popup = document.getElementById('popup');

    overlay.style.display = 'none';
    popup.style.display = 'none';
}

这个示例中，点击"显示弹窗"按钮会触发showPopup()函数，该函数将显示一个覆盖整个页面的半透明黑色背景（overlay）和弹窗（popup）。点击弹窗中的"关闭"按钮会触发hidePopup()函数，该函数将关闭弹窗和背景。

在这个示例中，我们使用了position: fixed属性来确保背景和弹窗始终固定在页面上。transform: translate(-50%, -50%)属性将弹窗水平和垂直居中。

请注意，这个示例中使用了display: none属性来隐藏背景和弹窗，并在需要时通过JavaScript将其显示出来

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

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