如何在我的所有网页上显示叠加层？

Question

I'm setting up a website and I would like the ability for a user to press a button to open an overlay (code is below), which would appear on every web page. 我正在建立一个网站，我希望用户能够按下按钮打开覆盖图（代码在下面），这将显示在每个网页上。

I have already tried going through each individual file, pasting the code but it is becoming tedious, due to the number of files that i have and a number of file conflicts. 我已经尝试浏览每个单独的文件，粘贴代码但由于我拥有的文件数量和一些文件冲突而变得乏味。

<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

unless you have the ability to use includes or fragments, you either have to include a div on every page OR you could use jquery html to insert via a global js file. 除非您能够使用包含或片段，否则您必须在每个页面上包含div，或者您可以使用jquery html通过全局js文件插入。

something like this inside your click event: 在你的点击事件中有类似的东西：

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

如何在我的所有网页上显示叠加层？

问题描述

1 个解决方案

解决方案1
0 2019-05-20 20:10:13

如何在我的所有网页上显示叠加层？

问题描述

1 个解决方案

解决方案1 0 2019-05-20 20:10:13

解决方案1
0 2019-05-20 20:10:13