플로팅 레이어 플라이아웃
3283 단어 JavaScripthtmlcss
<html>
<head>
<style type="text/css">
#tranDiv {
position:absolute;
left:0px;
top:0px;
}
#tranDivBack {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background-color:#000000;
filter:alpha(Opacity=30);
-moz-opacity:0.3;
opacity:0.3;
}
#infoDiv {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
text-align:center;
}
.pop_box {
background:#FFF;
padding:20px;
border:#666 8px solid;
}
</style>
<script language="javascript">
// ，
//var div_width = 464;
//var div_height = 445;
function showWindow(width,height){
location.href="#";
//width = div_width;
//height = div_height;
var windowstr= document.getElementById("popLayer").innerHTML;
document.getElementById("infoDiv").innerHTML=windowstr;
document.getElementById("infoDiv").style.left=((document.body.clientWidth-width)>0?(document.body.clientWidth-width):0)/2+"px";
document.getElementById("infoDiv").style.top=100+"px";
document.getElementById("infoDiv").style.zIndex=10001;
document.getElementById("infoDiv").style.width=width;
document.getElementById("infoDiv").style.height=height;
document.getElementById("tranDiv").style.height=document.body.clientHeight+ "px";
document.getElementById("tranDiv").style.width=document.body.clientWidth+ "px";
document.getElementById("tranDiv").style.display="";
document.getElementById("tranDivBack").style.display="";
document.getElementById("tranDivBack").style.zIndex=10000;
document.getElementById("infoDiv").style.display="";
}
function closeWindow(){
document.getElementById("tranDiv").style.display="none";
}
</script>
</head>
<!-- -->
<div id="tranDiv" style="display:none;">
<div id="tranDivBack"></div>
<div id="infoDiv"></div>
</div>
<!-- -->
<!-- -->
<div id="popLayer" style="display:none;">
<div class="pop_box">
<img src="test.jpg" width="424" height="405" />
<button onClick="closeWindow();"> </button>
</div>
</div>
<a href="javascript:showWindow(800,600);"> </a>
</html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
