gpt4 book ai didi

javascript - 我怎样才能在我的所有网页上显示一个叠加层?

转载 作者:行者123 更新时间:2023-11-27 23:56:36 25 4
gpt4 key购买 nike

我正在建立一个网站,我希望用户能够按下一个按钮来打开一个叠加层(代码如下),它会出现在每个网页上。

我已经尝试遍历每个单独的文件,粘贴代码,但由于我拥有的文件数量和许多文件冲突,它变得很乏味。

<style>
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,1);
z-index: 2;
cursor: pointer;
}

#text{
position: absolute;
top: 50%;
left: 50%;
font-size: 50px;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
</style>
</head>
<body>

<div id="overlay" onclick="off()">
<div id="text">Overlay Text</div>
</div>

<div style="padding:20px">
<button onclick="on()">Hide</button>
</div>

<script>
function on() {
document.getElementById("overlay").style.display = "block";
}

function off() {
document.getElementById("overlay").style.display = "none";
}
</script>

最佳答案

除非您能够使用包含或片段,否则您要么必须在每个页面上包含一个 div,要么您可以使用 jquery html 通过全局 js 文件插入。

点击事件中的类似内容:

$( ".btn" ).on( "click", function() {
$('#overlay').html("<div id="overlay"><div id="text">Overlay Text</div></div>");
});

关于javascript - 我怎样才能在我的所有网页上显示一个叠加层?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56227023/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com