平台怎样实现全局动态弹窗

Jonathan

想让画面支持下面自定义的风格和弹窗
<head>
<style>
/* 提示框样式 */
.alert-box {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px 40px;
background-color: rgba(0, 0, 0, 0.8);
color: white;
border-radius: 8px;
font-family: Arial, sans-serif;
font-size: 16px;
z-index: 1000;
opacity: 0;
animation: fadeInOut 3s;
}

    /* 淡入淡出动画 */
    @keyframes fadeInOut {
        0% { opacity: 0; }
        15% { opacity: 1; }
        85% { opacity: 1; }
        100% { opacity: 0; }
    }
</style>

</head>
<body>

<button onclick="showAlert('操作成功！', 2000)">显示提示</button>

<script>
    function showAlert(message, duration = 2000) {
        // 创建提示框元素
        const alertBox = document.createElement('div');
        alertBox.className = 'alert-box';
        alertBox.textContent = message;

        // 添加到页面
        document.body.appendChild(alertBox);

        // 自动移除
        setTimeout(() => {
            alertBox.remove();
        }, duration);
    }
</script>

</body>
应该怎样操作

核桃酥

可以使用react组件看一下

Jonathan

@核桃酥想根据数据值在屏幕正中间弹出一个信息窗口，怎样实现。react组件好像实现不了动态弹窗

核桃酥

如果只是想在屏幕中间弹出信息窗口，可以用一个组件组配置展示的内容，然后给组件组配置显示和隐藏，显示隐藏可以根据你的数据值来绑定

Jonathan

@核桃酥想要一个全局的信息弹窗，在不同页面都可以动态弹出。跟antd.massage类似，但antd.massage窗口尺寸太小，不能显示在正中间，停留时间也有点短
不知道平台里通过脚本或函数能不能实现

核桃酥

你想做这个的目的是展示什么数据，什么业务场景？每个页面都弹出？

Jonathan

@核桃酥用于显示系统提示信息，使用脚本判断数据动态给出提示

核桃酥

可以用这种写法

AIRIOT智慧系统搭建平台经验交流

平台怎样实现全局动态弹窗