您的位置：首页 > Web前端 > CSS

css+js实现一个弹出层，完成注册功能 带有遮罩层，比较简单

2015-04-01 15:32 1066 查看
根据网上的列子自己具体实现

首先看下HTML 代码，即要弹出的注册层代码：

放在<BODY></BODY>

1.<div id="alert">

2.<h4><span>正在注册</span><span id="close">关闭</span></h4>

3.<form >

4.<p><label>用户名</label><input type="text" id=reuser class="myinp" onmouseover="this.style.border='1px solid #f60'"

onfocus="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'"/></p>

5. <p><label> 密　码</label><input type="password" id=repassword class="myinp" onmouseover="this.style.border='1px solid #f60'" onfocus="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'" /></p>

6. <p><input type="button" id="register" value="注册" class="sub" onclick='check()'/><input type="reset" value="重置" class="sub" /></p>

</form>

</div>

下面分别解释下：

1对应创建一个DIV标签，即弹出的DIV层

2.用在DIV层的上边界，来输出提示信息，<span>标签是用来针对提示信息进行格式化的 一会的<style>标签里会用到。

3.创建一个表单，因为只有在表单里,按钮reset功能才能够实现，即清空注册框

4.创建一个LABEL显示“用户名”，后边跟一个input提示框,class="myinp"应用了myinp样式，onmouseover当鼠标划过的时候触发改变输入框边框的样式（边框宽度1PX 实线 #f60颜色） onfocus属性是表示当获取焦点后出发事件，即当鼠标点到输入框中出发this.style.border='1px solid #f60' 这个属性，onblur表示失去焦点后触发一个属性。

5同上解释

6.创建一个注册和重置按钮，并调用JS中的check()函数。

接下来看一下<style> 放在<head></head>中：

<style>

{margin:0;padding:0;font-size:12px;}

html,body {height:100%;width:100%;}

#alert {border:1px solid #369;width:350px;height:200px;background:#e2ecf5;z-index:1000;position:absolute;display:none;} // 这句是将ID为alert的DIV进行整体设置，开始设置为边框1PX,实线，#369颜色，宽度350PX 告诉200PX 背景颜色#e2ecf5 Z-INDEX属性表示将层放在最上边，位置是绝对，重点是display:none 这句话是将我们刚才设置好的DIV层进行隐藏，你在页面上是看不到的，当点击按钮触发一个事件才让这个DIV层显示出来。

接下来的都是对DIV内部的一些标签进行格式化：

#alert h4 {height:20px;background:#369;color:#fff;padding:5px 0 0 5px;}

#alert h4 span {float:left;}

#alert h4 span#close {margin-left:210px;font-weight:500;cursor:pointer;}

#alert p {padding:12px 0 0 30px;}

#alert p label {margin-left:50px;}

#alert p input {width:120px;margin-left:20px;}

#alert p input.myinp {border:1px solid #ccc;height:16px;} //myinp样式

#alert p input.sub {width:60px;margin-left:60px;}

</style>

最后来看一下重点的JS里边的函数：

function res()

{

var myAlert = document.getElementById("alert"); //根据ID获得DIV弹出层的对象

var mClose = document.getElementById("close"); //根据ID获得DIV弹出层中的close标签对象，为了对close增加点击事件

myAlert.style.display = "block"; //点击后将我们的DIV弹出层显示出来

myAlert.style.position = "absolute"; //设置位置方式 绝对

myAlert.style.top = "40%"; //css的left和top属性指的是距最近的一个position属性为relative或者absolute的父级元素的左边或上边的距离，所以当要设置css的top和left
的属性时，一定要确保定义position为absolute或者relative；

myAlert.style.left = "50%";

myAlert.style.marginTop = "-75px"; //设置元素的上外边界

myAlert.style.marginLeft = "-150px"; //设置元素的左外边界 如果只用myAlert.style.top 和left 也可进行定位

mybg = document.createElement("div"); //创建一个DIV即遮盖层

mybg.setAttribute("id","mybg"); //设置属性，

mybg.style.background = "#000"; //设置背景为黑色

mybg.style.width = "100%"; //宽度100%即覆盖整个页面

mybg.style.height = "100%"; //高度100%配合宽度覆盖整个页面

mybg.style.position = "absolute"; //位置

mybg.style.top = "0"; //上边界为0

mybg.style.left = "0"; //左边界为0

mybg.style.zIndex = "500"; //这里设置了层的位置，数值为500即是在我们想要弹出的注册层（z-index 为1000）的下边，显示出遮盖效果，（数值约大约在最上
层）

mybg.style.opacity = "0.3"; //设置 div 元素的不透明级别 这里就是实现了遮盖同时又可以显示出我们的登录界面

mybg.style.filter = "Alpha(opacity=30)"; //设置透明层次opacity的值从0-100，0为全透明 100为原图

document.body.appendChild(mybg); //采用appendchild函数将新创建的DIV遮盖曾添加到BODY元素里

document.body.style.overflow = "hidden"; //当规定的内容溢出元素框时候，出发的效果，本例子即是内容溢出body后全部隐藏

mClose.onclick = function() //给close对象添加一个点击函数，当点击关闭时候，背景遮盖层DIV和弹出层DIV全部都隐藏起来，display属性为none

{

myAlert.style.display = "none";

mybg.style.display = "none";

};

}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航