Question

我正在建立一个网站，我希望用户能够按下按钮以打开一个覆盖图（下面的代码），该覆盖图会出现在每个网页上。

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

<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>

Answer 1

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

您的点击事件中的内容如下：

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

如何在所有网页上显示覆盖图？

1 个答案: