帮我写几行html的js部分

collinchen1218 发表于 2024-5-24 21:33

要求：打开网页，进行检测，如果发现问题，自动置顶一个弹窗（或者图片），要全覆盖网页，红色加粗显示：你好，你的行为被发现，现已拦截
然后，等待3秒，跳转回上一级网页

cattie 发表于 2024-5-24 21:48

单纯的js无法做到置顶弹窗这一点，可以配合css加上模糊以及遮罩效果（初始为display：none状态，后续再通过js修改style）。

CycleKid 发表于 2024-5-24 21:49

// 监测网页出现问题时弹出警告
function detectAndAlert() {
// 检测到问题时
if (/* 在此处检测到问题 */) {
// 创建一个全屏覆盖的弹窗
var popup = document.createElement('div');
popup.style.position = 'fixed';
popup.style.top = 0;
popup.style.left = 0;
popup.style.width = '100%';
popup.style.height = '100%';
popup.style.backgroundColor = 'rgba(255, 0, 0, 0.8)';
popup.style.zIndex = '9999';
popup.style.display = 'flex';
popup.style.justifyContent = 'center';
popup.style.alignItems = 'center';
popup.style.color = 'white';
popup.style.fontSize = '24px';
popup.style.fontWeight = 'bold';
popup.innerHTML = '你好，你的行为被发现，现已拦截';
document.body.appendChild(popup);

// 等待3秒后返回上一级网页
setTimeout(function() {
window.history.go(-1);
}, 3000);
}
}

collinchen1218 发表于 2024-5-24 21:52

cattie 发表于 2024-5-24 21:48
单纯的js无法做到置顶弹窗这一点，可以配合css加上模糊以及遮罩效果（初始为display：none状态，后续再通过 ...

没事，那配合css怎么做？

XDXT 发表于 2024-5-24 22:01

找个GPT帮你生成下不就结了？

你还可以要求它进行简单的样式修改。

hbe 发表于 2024-5-24 22:25

是全屏的弹窗吧

collinchen1218 发表于 2024-5-24 22:26

hbe 发表于 2024-5-24 22:25
是全屏的弹窗吧

对的，最好，实在不行可以降低要求

小兴818 发表于 2024-5-24 22:35

用提示弹窗就毫无难度alert

Delevin 发表于 2024-5-24 22:38

2楼的那个不是就可以吗？你只需要改一下setTimeout 那一段。

cfnm123 发表于 2024-5-24 23:09

本帖最后由 cfnm123 于 2024-5-24 23:10 编辑

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>检测与响应示例</title>
<style>
   /* 背景遮罩层样式 */
   #mask {
         position: fixed;
         display: none;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景作为遮罩 */
         z-index: 9998; /* 在覆盖层之下 */
   }

   /* 全屏覆盖层样式 */
   #overlay {
         position: fixed;
         display: none;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background-color: rgba(255, 0, 0, 0.5); /* 半透明红色背景 */
         z-index: 9999; /* 确保覆盖在遮罩之上 */
         backdrop-filter: blur(5px); /* 添加背景模糊效果 */
         text-align: center;
         padding-top: 15%;
   }

   /* 弹窗内容样式 */
   #overlay > div {
         font-size: 24px;
         color: white;
         font-weight: bold;
         text-shadow: 1px 1px 2px black;
   }
</style>
</head>
<body>


<div id="mask"></div>


<div id="overlay">
<div>你好，你的行为被发现，现已拦截</div>
</div>

<script>
window.onload = function() {
   var problemDetected = true; // 实际应用中，根据实际情况设置这个值

   if (problemDetected) {
         var mask = document.getElementById('mask');
         var overlay = document.getElementById('overlay');
         mask.style.display = 'block'; // 显示遮罩层
         overlay.style.display = 'block'; // 显示覆盖层

         setTimeout(function() {
            window.history.back(); // 返回上一页
         }, 3000);
   }
};
</script>

</body>
</html>

页: [1] 2

吾爱破解 - 52pojie.cn's Archiver

帮我写几行html的js部分