处理不同覆盖层ID的方法:使用相同的JavaScript函数
P粉511757848
2023-09-04 22:36:35
<p>我想要为不同的链接显示覆盖层。第一个覆盖层包含图片和文本,而如果我们点击链接2,它必须显示具有相同结构但不同内容的覆盖层2。请帮助我获得所需的输出。</p>
<p>
<pre class="brush:js;toolbar:false;">function on() {
document.getElementById("overlay").style.display = "block";
}
function on1() {
document.getElementById("overlay1").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}</pre>
<pre class="brush:css;toolbar:false;">.img {
transition: transform 5s ease-in-out;
transform: scale(1);
transform-origin: 0 0;
}
.img:hover {
transform: scale(1.25)
}
#overlay,
#overlay1 {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
z-index: 77777772;
cursor: pointer;
}
#text,
#text1 {
position: fixed;
top: 20%;
left: 5%;
//font-size: 50px;
color: black;
// transform: translate(-50%,-50%);
// -ms-transform: translate(-50%,-50%);
}</pre>
<pre class="brush:html;toolbar:false;"><div id="overlay" onclick="off()">
<div id="text">
<div style="width: 48%; float:left">
<h2>XXX</h2>
<h4>ZZZ</h4>
<p style="font-size:14px;">
帮助发掘居住在山谷中的人们的巨大才华。 </p>
</div>
<div style="width: 50%; float:right; margin-top:-220px;
">
<img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/boydB3_6881-683x1024.jpg">
</div>
</div>
<div style="padding:20px">
<h2></h2>
<a onclick="on()"></a>
</div>
<div id="overlay1" onclick="on1()">
<div id="text1">
<div style="width: 48%; float:left">
<h2>AAA</h2>
<h4>MMM</h4>
<p style="font-size:14px;">帮助发掘居住在山谷中的人们的巨大才华。 </p>
</div>
<div style="width: 50%; float:right; margin-top:-220px;
">
<img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/002boydB37683-703x1024.jpg">
</div>
</div>
<div style="padding:20px">
<h2></h2>
<a onclick="on1()"></a>
</div>
</div>
</div>
<a onclick="on(id)"style="font-size: 11pt;">阅读更多 -></a>
<a onclick="on(id)"style="font-size: 11pt;">阅读更多 -></a>
1. 列表项</pre>
</p>
有更好的方法来实现这个,但根据您的要求,您可以将不同的
ids
和actions
作为params
传递给同一个函数,像这样