다양한 오버레이 ID를 처리하는 방법: 동일한 JavaScript 함수 사용
<p>다른 링크에 대한 오버레이를 표시하고 싶습니다. 첫 번째 오버레이에는 이미지와 텍스트가 포함되어 있으며, 링크 2를 클릭하면 구조는 동일하지만 콘텐츠가 다른 오버레이 2가 표시되어야 합니다. 원하는 결과를 얻을 수 있도록 도와주세요. </p>
<p>
<pre class="brush:js;toolbar:false;">function on() {
document.getElementById("overlay").style.display = "차단";
}
함수 on1() {
document.getElementById("overlay1").style.display = "차단";
}
기능 끄기() {
document.getElementById("overlay").style.display = "none";
}</pre>
<pre class="brush:css;toolbar:false;">.img {
전환: 5s easy-in-out 변환;
변환: scale(1);
변환 원점: 0 0;
}
.img:호버 {
변환: 스케일(1.25)
}
#씌우다,
#오버레이1 {
위치: 고정;
디스플레이: 없음;
너비: 100%;
높이: 100%;
상단: 0;
왼쪽: 0;
오른쪽: 0;
하단: 0;
배경색: 흰색;
Z-색인: 77777772;
커서: 포인터;
}
#텍스트,
#텍스트 1 {
위치: 고정;
최고: 20%;
왼쪽: 5%;
//글꼴 크기: 50px;
검정색;
// 변환: 번역(-50%,-50%);
// -ms-변환: 번역(-50%,-50%);
}</pre>
<pre class="brush:html;toolbar:false;"><div id="overlay" onclick="off()">
<div id="텍스트">
<div style="너비: 48%; 부동:왼쪽">
XXX
ZZZ
<p style="font-size:14px;">
계곡에 사는 사람들의 엄청난 재능을 발견하도록 도와주세요. </p>
</div>
<div style="너비: 50%; float:right; margin-top:-220px;
">
<img class="img" style="높이:100%" src="http://cdn.dpmag.com/2016/06/boydB3_6881-683x1024.jpg">
</div>
</div>
<div style="padding:20px">
<a onclick="on()"></a>
</div>
<div id="overlay1" onclick="on1()">
<div id="text1">
<div style="너비: 48%; 부동:왼쪽">
<h2>AAA</h2>
MMM
<p style="font-size:14px;">계곡에 사는 사람들의 엄청난 재능을 발견하도록 도와주세요. </p>
</div>
<div style="너비: 50%; float:right; margin-top:-220px;
">
<img class="img" style="높이:100%" src="http://cdn.dpmag.com/2016/06/002boydB37683-703x1024.jpg">
</div>
</div>
<div style="padding:20px">
<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>
