记录复制按钮弹窗通知的修改

今天在做一个复制功能按钮的时候，需要给这个复制按钮增加一个通知弹窗，弹窗居中，浅低白字，跟随页面滚动居中。代码为自己纯手敲，欢迎交流。

图片展示

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;
  }

js

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);
});