通过AI编写的原生JS弹窗气泡

寻梦xunm| 153| 网络收集

1个月前

超过38天温馨提示

本文最后更新于2025年09月18日，已超过38天没有更新，若内容或图片失效，请留言反馈。

这款js弹窗气泡代码非常简约，能够胜任日常弹窗业务。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生JS弹窗气泡</title>
    <style>
        /* 弹窗气泡样式 - 顶部居中显示 */
        .popup-bubble {
            position: fixed;
            padding: 8px 14px;
            border-radius: 6px;
            background-color: #333;
            color: white;
            font-family: Arial, sans-serif;
            font-size: 12px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
            z-index: 9999;
            opacity: 0;
            transition: opacity 0.3s ease, transform 0.3s ease;
            pointer-events: auto;
            /* 顶部居中显示 */
            top: 20px;
            left: 50%;
            transform: translateX(-50%) translateY(-20px);
        }
        
        /* 气泡出现的动画 */
        .popup-bubble.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
        
        /* 不同类型的气泡样式 */
        .popup-bubble.success {
            background-color: #4CAF50;
        }
        
        .popup-bubble.error {
            background-color: #f44336;
        }
        
        .popup-bubble.warning {
            background-color: #ff9800;
        }
        
        .popup-bubble.info {
            background-color: #2196F3;
        }
        
        /* 关闭按钮样式 */
        .popup-bubble .close-btn {
            position: relative;
            display: inline-block;
            vertical-align: middle;
            margin-left: 8px;
            color: rgba(255, 255, 255, 0.8);
            background: none;
            border: none;
            cursor: pointer;
            font-size: 14px;
            width: 16px;
            height: 16px;
            padding: 0;
            line-height: 1;
            transition: background-color 0.2s;
            border-radius: 50%;
        }
        
        .popup-bubble .close-btn:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }
        
        /* 测试按钮样式 */
        .test-buttons {
            margin: 20px;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .test-btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: opacity 0.2s;
        }
        
        .test-btn:hover {
            opacity: 0.9;
        }
    </style>
</head>
<body>
    <div class="test-buttons">
        <button class="test-btn" onclick="showPopup('默认提示信息')">默认弹窗</button>
        <button class="test-btn" style="background-color: #4CAF50; color: white" onclick="showPopup('操作成功！', 'success')">成功弹窗</button>
        <button class="test-btn" style="background-color: #f44336; color: white" onclick="showPopup('操作失败，请重试！', 'error')">错误弹窗</button>
        <button class="test-btn" style="background-color: #ff9800; color: white" onclick="showPopup('请注意，这是一个警告！', 'warning')">警告弹窗</button>
        <button class="test-btn" style="background-color: #2196F3; color: white" onclick="showPopup('这是一条信息提示', 'info')">信息弹窗</button>
        <button class="test-btn" style="background-color: #9C27B0; color: white" onclick="showPopup('这个弹窗不会自动关闭', 'info', false)">不自动关闭</button>
        <button class="test-btn" style="background-color: #607D8B; color: white" onclick="showPopup('3秒后跳转到百度', 'info', true, 3000, 'https://www.baidu.com')">带跳转的弹窗</button>
    </div>

    <script>
        /**
         * 显示弹窗气泡
         * @param {string} message - 弹窗消息内容
         * @param {string} type - 弹窗类型：success, error, warning, info (默认值：无)
         * @param {boolean} autoClose - 是否自动关闭 (默认值：true)
         * @param {number} duration - 自动关闭延迟时间(毫秒) (默认值：3000)
         * @param {string} url - 弹窗关闭后跳转的URL (默认值：null，不跳转)
         * @param {number} redirectDelay - 弹窗关闭后延迟多久跳转(毫秒) (默认值：500)
         */
        function showPopup(
            message, 
            type = '', 
            autoClose = true, 
            duration = 3000, 
            url = null, 
            redirectDelay = 500
        ) {
            // 创建弹窗元素
            const bubble = document.createElement('div');
            bubble.className = `popup-bubble ${type}`;
            
            // 存储跳转相关参数
            bubble.redirectUrl = url;
            bubble.redirectDelay = redirectDelay;
            
            // 设置弹窗内容
            bubble.innerHTML = `
                <span class="popup-message">${message}</span>
                <button class="close-btn">&times;</button>
            `;
            
            // 添加到页面
            document.body.appendChild(bubble);
            
            // 触发显示动画
            setTimeout(() => {
                bubble.classList.add('show');
            }, 10);
            
            // 关闭按钮事件
            const closeBtn = bubble.querySelector('.close-btn');
            closeBtn.addEventListener('click', () => {
                closePopup(bubble);
            });
            
            // 自动关闭
            if (autoClose) {
                bubble.closeTimer = setTimeout(() => {
                    closePopup(bubble);
                }, duration);
            }
        }
        
        /**
         * 关闭弹窗
         * @param {HTMLElement} bubble - 弹窗元素
         */
        function closePopup(bubble) {
            // 清除定时器
            if (bubble.closeTimer) {
                clearTimeout(bubble.closeTimer);
            }
            
            // 移除显示类，触发淡出动画
            bubble.classList.remove('show');
            
            // 动画结束后移除元素
            setTimeout(() => {
                if (bubble.parentNode) {
                    bubble.parentNode.removeChild(bubble);
                }
                
                // 如果有URL参数，则延迟跳转
                if (bubble.redirectUrl) {
                    setTimeout(() => {
                        window.location.href = bubble.redirectUrl;
                    }, bubble.redirectDelay);
                }
            }, 300);
        }
        
        // 页面加载完成后显示一个欢迎弹窗
        window.addEventListener('load', () => {
            showPopup('欢迎使用弹窗气泡组件！', 'info');
        });
    </script>
</body>
</html>

免费 css html js 代码

本站相关资源来自互联网用户收集发布，仅供用于学习和交流。如有侵权之处，请联系站长并出示相关证明以便删除，敬请谅解！

0 赞 or 打赏

喜欢就打赏一点