技术标签 TAGS
专业技术精选
- 2020-03-20非常不错的骰子案例
- 2019-05-26vscode git and gitlens中文乱码问题
- 2011-12-14什么是网站制作的web标准
- 2011-12-14上海网站建设之六大不利优化因素
DIV弹出置顶层设计效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>6yang DIV弹出置顶层设计效果</title>
</head><style>
body{margin:0; font-size:12px;}
a{ color:#000} a:hover{ color:#F00;}
.yang_tab_float{ position:relative; padding:12px 0px 0px 12px; }
.yang_tab_float .yang_forms{ margin:0; padding:0;}
.yang_tab_float .close{ position:absolute; right:0px; top:-26px;}
.yang_tab_float .yang_forms { margin:0; padding:0;}
.yang_tab_float .yang_forms p{ margin:0; vertical-align:middle; height:37px;}
.yang_tab_float .yang_forms .input_text{width:195px;border:1px solid #ccc; height:17px; line-height:17px; padding:2px 0 2px 2px; vertical-align:middle;}
.yang_tab_float .yang_forms .yang_checkcode{ width:60px;border:1px solid #ccc; height:17px; line-height:17px; padding:2px 0 2px 2px; vertical-align:middle;}
.yang_tab_float .yang_forms input,.yang_tab_float .yang_forms img{ vertical-align:middle;}
</style>
<script type="text/javascript">
var t_DiglogX,t_DiglogY,t_DiglogW,t_DiglogH;
function DialogShow(showdata,ow,oh,w,h){ //显示DIV置顶层
var objDialog = document.getElementById("DialogMove");
if (!objDialog)
objDialog = document.createElement("div");
t_DiglogW = ow;
t_DiglogH = oh;
DialogLoc();
objDialog.id = "DialogMove";
var oS = objDialog.style;
oS.display = "block";
oS.top = t_DiglogY + "px";
oS.left = t_DiglogX + "px";
oS.margin = "0px";
oS.padding = "0px";
oS.width = w + "px";
oS.height = h + "px";
oS.position = "absolute";
oS.zIndex = "5";
oS.background = "#FFF";
oS.border = "solid #ccc 1px";
objDialog.innerHTML = showdata;
document.body.appendChild(objDialog);
}
function submit_b()
{ DialogHide();
document.forms[0].submit();
}
function DialogHide(){ //关闭div置顶层的主调
ScreenClean();
var objDialog = document.getElementById("DialogMove");
if (objDialog)
objDialog.style.display = "none";
}
function DialogLoc(){ //计算div窗口位置
var dde = document.documentElement;
if (window.innerWidth){
var ww = window.innerWidth;
var wh = window.innerHeight;
var bgX = window.pageXOffset;
var bgY = window.pageYOffset;
}else{
var ww = dde.offsetWidth;
var wh = dde.offsetHeight;
var bgX = dde.scrollLeft;
var bgY = dde.scrollTop;
}
t_DiglogX = (bgX + ((ww - t_DiglogW)/2));
t_DiglogY = (bgY + ((wh - t_DiglogH)/2));
}
function ScreenConvert(){ //整个页面区域加屏蔽层
var objScreen = document.getElementById("ScreenOver");
if(!objScreen)
var objScreen = document.createElement("div");
var oS = objScreen.style;
objScreen.id = "ScreenOver";
oS.display = "block";
oS.top = oS.left = oS.margin = oS.padding = "0px";
if (document.body.clientHeight) {
var wh = document.body.clientHeight + "px";
}else if (window.innerHeight){
var wh = window.innerHeight + "px";
}else{
var wh = "100%";
}
oS.width = "100%";
oS.height = wh;
oS.position = "absolute";
oS.zIndex = "3";
oS.background = "#cccccc";
oS.filter = "alpha(opacity=30)";
oS.opacity = 40/100;
oS.MozOpacity = 40/100;
document.body.appendChild(objScreen);
var allselect = document.getElementsByTagName("select");
for (var i=0; i<allselect.length; i++)
allselect[i].style.visibility = "hidden";
}
function ScreenClean(){ //清屏
var objScreen = document.getElementById("ScreenOver");
if (objScreen)
objScreen.style.display = "none";
var allselect = document.getElementsByTagName("select");
for (var i=0; i<allselect.length; i++)
allselect[i].style.visibility = "visible";
}
function Demo(){ //主调
ScreenConvert();
//var ShowDiv="<div class='yang_tab_float'>6Yang互联的创业上目标，是努力成为代表当代世界设计最高水平的专业设计工作室。通过我们的作品使我们客户的企业形象和产品价值大幅度提升。<span class='close'><a href='javascript:onclick:DialogHide()'>关闭</a></span></div>";
var ShowDiv="<form action='#' method='post'><div class='yang_tab_float'><div class='yang_forms'><p>用户名:<input type='text' class=input_text></p><p>密 码:<input type='text' class=input_text><input type='checkbox' value='' > 记住我</p><p>验证码:<input type='text' class='yang_checkcode'> 10+50</p><p><input type='button' value='提交' onclick='submit_b()' > <input type='reset' value='重填' > <a href='#'>我要注册</a></p><span class='close'><a href='javascript:onclick:DialogHide()'>关闭</a></span></div></div></form>";
DialogShow(ShowDiv,340,120,340,160);
}
</script>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!--
//Demo();
//-->
</SCRIPT>
<br>6yang<br>6yang<br><br><br><br><br><div style="border:1px solid #ccc;">6yang程序效果设计</div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div align="center"><a href="javascript:onclick:Demo();">我要注册</a></div><br><br>6yang<br><br>6yang<br><br>
</body>
</html>