复制按钮弹窗通知样式设计与实现：手撸 CSS + JS 示例代码分享

1,491 0 0

在日常前端开发中，一个友好的用户体验设计往往离不开细节的打磨。今天在做一个 复制按钮功能 时，我为它加上了一个 视觉上更温和的弹窗通知。它不仅能提示用户“复制成功”或“复制失败”，还能居中显示、跟随页面滚动保持位置不变，让整个交互过程显得更加自然顺滑。

这段功能完全由我手动编写，未引入第三方框架，兼容性良好，适合嵌入在各类项目中。也欢迎各位开发者交流探讨。

📸 效果展示图

复制按钮弹窗通知样式设计与实现：手撸 CSS + JS 示例代码分享

💡 核心功能说明

复制按钮点击后会自动将内容复制到剪贴板，并弹出一个居中显示的通知层，显示“复制成功”或“复制失败”。弹窗在1秒后自动消失，确保页面整洁。

🎨 CSS 样式代码（支持弹窗居中显示）：

.tubiaotanchuang {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
  }
  .tubiaotanchuang-content {
    min-width: 100px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    padding: 12px 25px;
    font-size: .875rem;
    text-align: center;
  }

🧠 JavaScript 实现逻辑：

document.getElementById('copyViewer').addEventListener('click', function() {
    const outputText = viewer.getValue().trim(); // 获取第二个输入框的内容并去除首尾空白

    // 创建一个临时的textarea元素，用于复制操作
    const tempTextarea = document.createElement('textarea');
    tempTextarea.value = outputText;
    document.body.appendChild(tempTextarea);
    tempTextarea.select();
    
    try {
        let message;
        if (outputText !== '') {
            // 尝试执行复制操作
            const successful = document.execCommand('copy');
            message = successful ? '复制成功' : '复制失败';
        } else {
            message = '复制失败';
        }

        // 修改页面的<div id="tanchutongzhi"></div>为相应的消息
        const tanchutongzhiDiv = document.getElementById('tanchutongzhi');
        tanchutongzhiDiv.innerHTML = `
            <div class="tubiaotanchuang">
                <div class="tubiaotanchuang-content">${message}</div>
            </div>
        `;
    } catch (err) {
        console.error('复制操作失败:', err);
    } finally {
        // 移除临时的textarea元素
        document.body.removeChild(tempTextarea);
    }

    setTimeout(function() {
        // 3秒后恢复页面的<div id="tanchutongzhi"></div>为初始状态
        const tanchutongzhiDiv = document.getElementById('tanchutongzhi');
        tanchutongzhiDiv.innerHTML = '';
    }, 1000);
});