写一个 js特效 页面打开 自动弹窗 背景暗化 兼容IE浏览器

以下是一个使用JavaScript实现的页面打开自动弹窗特效，并兼容IE浏览器的示例代码：

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title>弹窗特效示例</title>
    <style>
        /* 弹窗样式 */
        #popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0px 0px 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>
    <!-- 弹窗内容 -->
    <div id="popup">
        <h2>欢迎访问我的网站！</h2>
        <p>这是一个弹窗特效示例。</p>
        <button onclick="closePopup()">关闭</button>
    </div>

    <!-- 背景暗化 -->
    <div id="overlay"></div>

    <!-- 页面加载完成后自动弹窗 -->
    <script>
        window.onload = function() {
            showPopup();
        };

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

            // 显示弹窗和背景暗化
            popup.style.display = "block";
            overlay.style.display = "block";
        }

        function closePopup() {
            var popup = document.getElementById("popup");
            var overlay = document.getElementById("overlay");

            // 隐藏弹窗和背景暗化
            popup.style.display = "none";
            overlay.style.display = "none";
        }
    </script>
</body>
</html>

这个示例中，当页面加载完成后，会自动弹出一个包含欢迎消息的弹窗。同时，页面背景会被暗化，以提高弹窗的可视效果。

在JavaScript代码中，我们通过window.onload事件来绑定页面加载完成后的回调函数showPopup()。

showPopup()函数通过获取弹窗元素和背景暗化元素的引用，然后设置它们的display属性为"block"来显示弹窗和背景暗化。

closePopup()函数用于关闭弹窗，通过将弹窗元素和背景暗化元素的display属性设置为"none"来隐藏它们。

请注意，为了兼容IE浏览器，我们使用了window.onload事件而不是DOMContentLoaded事件，因为DOMContentLoaded事件在IE浏览器中不支持

写一个 js特效 页面打开 自动弹窗 背景暗化 兼容IE浏览器

写一个 js特效页面打开自动弹窗背景暗化兼容IE浏览器