H5代码
<!--弹框-->
<div id="popup">
<!--onclick="forward()" id="taskNotCommon"-->
<a class="btn btn-info btn-xs " href="javascript:void(0)" onclick="forward()">任务异常报警</a>
<!--线下-->
<img id="popup-gif" src="/mp3/warningGif.gif" alt="Animated GIF">
<audio id="audio" src="/mp3/music00.mp3" preload="auto"></audio>
<button id="closeButton" >X</button>
</div>css
<style>
#popup {
position: fixed;
bottom: 20px;
right: 20px;
width: 250px;
padding: 15px;
background-color: #f5f5f5;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
display: none; /* 初始时隐藏弹框 */
}
#popup a {
display: block;
margin-bottom: 10px;
text-decoration: none;
color: red;
}
#closeButton {
position: absolute;
top: -15px; /* 根据需要调整距离顶部的距离 */
right: -15px; /* 根据需要调整距离右边的距离 */
color: white; /* 可以自定义按钮文字颜色 */
border: none;
cursor: pointer;
}
#popup img {
width: 180px;
height: 100px;
}
#audio {
display: none;
}
</style>JS
/*M0*/
// 发送异步请求
function fetchData() {
return new Promise((resolve, reject) => {
// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();
xhr.open('GET', '/system/loading/listPop', true); // 线下 将'你的URL'替换为实际的URL
// 发送请求
xhr.send();
// 监听响应
xhr.onload = function() {
if (xhr.status === 200) { // 请求成功
// 解析返回的数据
// debugger;
console.log("返回的数据"+xhr.responseText);
const data = JSON.parse(xhr.responseText);
// console.log("返回的数据"+data);
resolve(data); // 返回数据数量
} else {
reject(new Error('请求失败')); // 处理请求失败的情况
}
};
xhr.onerror = function() {
reject(new Error('网络错误')); // 处理网络错误的情况
};
});
}
if (window.location.pathname === '/system/main') {
// 当前页面路径是首页，执行相应的方法
executeMethod();
}
function executeMethod() {
fetchData().then(dataCount => {
// console.log('页面加载完成，返回的数据数量：', dataCount);
if (dataCount > 0) {
console.log("显示弹框");
// 显示弹框
popup.style.display = 'block'; // 显示弹框
}
}).catch(error => {
console.error('请求过程中发生错误：', error);
});
};
/* 跳转到任务异常列表 */
function forward() {
var url = "system/loading/customerLoading";//本地
$.modal.openTab("任务异常列表",url);
//$.modal.openTab();
}
/*弹框关闭按钮加入单击事件*/
document.getElementById('closeButton').addEventListener('click', function() {
// 暂停声音
var audio = document.getElementById("audio");
audio.pause(); // 暂停声音，注意浏览器需要用户交互来启动音频播放
document.getElementById('popup').style.display = 'none';
});
/*弹框跳转页面加入单击事件*/
document.getElementById('popup').addEventListener('click',function(){
// 播放声音
var audio = document.getElementById("audio");
audio.play(); // 播放声音，注意浏览器需要用户交互来启动音频播放
})
