浮动层,可以做登录或者其他处理

最新推荐文章于 2019-10-14 15:34:52 发布

天步

最新推荐文章于 2019-10-14 15:34:52 发布

阅读量379

点赞数

分类专栏： php

本文链接：https://blog.csdn.net/sn_qmzm521/article/details/53256389

版权

php 专栏收录该内容

67 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>at center</title>
<style>
body{
width:1920px;
padding:10px;
padding:0px;
margin:auto;

}
#mydiv{
position:relative;
width:400px;
height:200px;
background:lightgreen;
border:1px solid yellow;
line-height:200px;
vertical-align:middle;
text-align:center;
z-index:100;
margin:auto;
}
#mydiv2{
position:absolute;
z-index:90;
background-color:#ccc;
opacity:0.6;
float:left;
}
</style>
</head>
<script>
function floatdiv()
{
document.getElementById("mydiv").style.left=(document.body.offsetWidth-document.getElementById("mydiv").offsetWidth)/16+document.body.scrollLeft;//浮动层左边距
document.getElementById("mydiv").style.top=(document.body.clientHeight-document.getElementById("mydiv").offsetHeight)/4-document.body.scrollTop;//浮动层上边距
document.getElementById("mydiv2").style.height=document.body.clientHeight;//隐藏元素等于body高度
document.getElementById("mydiv2").style.width=document.body.offsetWidth;//隐藏元素等于body宽度，覆盖body可视面积
}
window.οnlοad=floatdiv;//页面载入执行函数
window.οnscrοll=floatdiv;//元素滚动事件
function dianji(){//点击浮动层，取消浮动层
document.getElementById("mydiv").style.display="none";//中间浮动窗口隐藏
document.getElementById("mydiv2").style.display="none";//全屏浮动窗口隐藏
}
function chuxian(){//点击触发浮动层
document.getElementById("mydiv").style.display="block";//中间窗口显示
document.getElementById("mydiv2").style.display="block";//全局浮动层隐藏显示
}
function tanchuang(){
alert();
}
</script>
<body >

<div id="mydiv2" ></div>
<p οnclick="chuxian();">网页内容</p>
<input type="button" value="点击会发生什么" οnclick="tanchuang();"/>
<div id="mydiv" οnclick="dianji();">
中间浮动页面
<form name="myform" id="myform" action="" method="post" enctype="multipart/form-data" target="tarframe">
</form>
</div>

</body>
</html>