js 단순 커버 효과 (select 해결 가능)
3322 단어 html
난점: div 층 은 select 컨트롤 을 가 릴 수 없 기 때문에 특수 처리 해 야 합 니 다. 방법 두 가 지 는 팝 업 창 아래 iframe 을 추가 하여 select 를 가 리 는 것 입 니 다.두 번 째 는 팝 업 할 때 select 컨트롤 을 숨 기 고 두 번 째 방법 을 선택 하 는 것 입 니 다.
실현 원리: 페이지 와 팝 업 창 사이 에 반투명 층 을 추가 하여 페이지 의 내용 을 덮어 씁 니 다.
주 코드:
function Open()
{
//select 컨트롤 숨 기기
DispalySelect(0);
//가리개 층 보이 기
document.getElementById("divPageMask").style.display="block";
/ / 커버 처리 층
resizeMask();
window.onResize = resizeMask;
//팝 업 창 보이 기
document.getElementById("divOpenWin").style.display="block";
}
function Close()
{
//select 컨트롤 보이 기
DispalySelect(1);
//처리 커버 층
divPageMask.style.width = "0px";
divPageMask.style.height = "0px";
divOpenWin.style.display = "none";
window.onResize = null;
document.getElementById("divOpenWin").style.display="none";
}
/ / 페이지 마스크
function resizeMask()
{
divPageMask.style.width = document.body.scrollWidth;
divPageMask.style.height = document.body.scrollHeight;
divOpenWin.style.left = ((document.body.offsetWidth - divOpenWin.offsetWidth) / 2);
divOpenWin.style.top = ((document.body.offsetHeight - divOpenWin.offsetHeight) / 2);
}
function DispalySelect(val)
{ //select 컨트롤 표시 및 숨 기기
var dispalyType;
var arrdispalyType=["hidden","visible"];
var arrObjSelect=document.getElementsByTagName("select");
for (i=0;i
arrObjSelect[i].style.visibility=arrdispalyType[val];
}
}
다음은 HTML 예 입 니 다.
<style type="text/css">
.body,td{font-size:12px}
#divPageMask{background-color:white; filter:alpha(opacity=50);left:0px;position:absolute;top:0px;}
#divOpenWin{background-color:#EEEEEE;position: absolute;left:0px;top:0px;display: none;z-index:50; width:300px;height:150px}
</style>
<div id="divPageMask"></div>//
<div id="divOpenWin"><center><a href="javascript:Close();"> </a></center></div>//
<label></label>
<center>
<table border="0" cellpadding="0" cellspacing="0" width="650">
<tbody>
<tr>
<td colspan="2" align="center" height="90"><p><img src="http://www.sopull.com/Images/Index/logo.gif" height="60" width="250"></p>
<p> </p>
<p> </p></td>
</tr>
<tr>
<td height="10" style="color:#666666;font-size:13px"> </td>
</tr>
</tbody>
</table>
</center>
<select><option>1<option>
<option>11<option>
<option>11<option>
</select>
<p align="center"> </p>
<p align="center"><a href="javascript:Open();"> </a></p>
</tbody>
</table>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다른 사람의 웹사이트 편집: contenteditable 및 designMode그래도 우리가 그렇게 할 수 있다고 생각하는 것은 멋진 일입니다. 제가 강조하고 싶었던 일종의 관련 API가 실제로 몇 개 있기 때문에 오늘 그것을 가져왔습니다. contenteditable는 "true" 값이 할당...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
