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

Jonathan

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

Jonathan

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

Jonathan

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

Jonathan

@核桃酥好的

Jonathan

@核桃酥修改什么属性能改，能给个例子吗

Jonathan

@核桃酥这有点麻烦啊，按钮的脚本能实现吗，比如点击事件修改按钮的背景属性

Jonathan

怎样实现按钮点击时变色，持续1S后恢复原本颜色

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>
应该怎样操作

Jonathan

@核桃酥现在可以了

Jonathan

@核桃酥之前发你过

Jonathan

@核桃酥是的

Jonathan

@核桃酥选了，5楼的第一个图片显示的表记录详情

Jonathan

@tbz 谢谢

Jonathan

换了好几个主题，移动端预览主题都没变化

Jonathan

@核桃酥好的

Jonathan

Jonathan

@核桃酥我配置了，弹出的是空白，视频显示不出来是啥原因

视频在画面和报警弹窗里是正常的

Jonathan

@12345 4.40

Jonathan

@12345 一个标签页

第二页关联了一个表单

Jonathan

@12345

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

Jonathan

帖子