原生js实现半透明遮罩层效果具体代码

代码如下:

<!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=utf-8" />
<title>弹出提示</title>
<style>
* {
margin: 0;
padding: 0;
font-size: 12px;
}
html, body {
height: 100%;
width: 100%;
}
#content {
background: #FFFFFF;
padding: 30px;
height: 100%;
}
#content a {
font-size: 30px;
color: #369;
font-weight: 700;
}
#alert { z-index:2;
border: 1px solid #369;
width: 300px;
height: 150px;
background: #e2ecf5;
z-index: 1000;
position: absolute;
display: none;
}
#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 input {
width: 120px;
margin-left: 20px;
}
#alert p input.myinp {
border: 1px solid #ccc;
height: 16px;
}
#alert p input.sub {
width: 60px;
margin-left: 30px;
}
#mask{ position:absolute; top:0; left:0; height:100%; width:100%; background:#000; opacity:0.3; display:none; z-index:1;}
</style>
</head>
<body>
<div id="content"> <a href="#">注册</a> </div>
<div id="alert">
<h4><span>现在注册</span><span id="close">关闭</span></h4>
<p>
<label> 用户名</label>
<input type="text" class="myinp" onmouseover="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'" />
</p>
<p>
<label> 密　码</label>
<input type="password" class="myinp" onmouseover="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'" />
</p>
<p>
<input type="submit" value="注册" class="sub" />
<input type="reset" value="重置" class="sub" />
</p>
</div>
<div id="mask"></div><!-- 遮罩层div-->
<script type="text/javascript">
var myAlert = document.getElementById("alert");
var myMask=document.getElementById('mask');
var reg = document.getElementById("content").getElementsByTagName("a")[0];
var mClose = document.getElementById("close");
reg.onclick = function()
{
myMask.style.display="block";
myAlert.style.display = "block";
myAlert.style.position = "absolute";
myAlert.style.top = "50%";
myAlert.style.left = "50%";
myAlert.style.marginTop = "-75px";
myAlert.style.marginLeft = "-150px";
document.body.style.overflow = "hidden";
}
mClose.onclick = function()
{
myAlert.style.display = "none";
myMask.style.display = "none";
}
</script>
</body>
</html>

赞 (0)

相关推荐

  • js实现鼠标移动到图片产生遮罩效果

    js实现鼠标移动到图片产生遮罩效果

    本文实例为大家分享了js实现鼠标移动到图片产生遮罩效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>mask</title> <style> .pic{ width:300px; height:250px; background:url(icon/pro

  • Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法

    这两天要用到正好练练手,比想象中碰到的问题要多,比如: ie6背景透明 ie6居中显示 还有对js对象的理解 openID=显示按钮,conID=需要显示的div,closeID=关闭按钮 解决了: 1.可以遮挡ie6下的select元素 但是在ie6下div没有透明度 2.弹出的div可以一直在浏览器屏幕中间显示 问题: 1.目前不支持.class 只支持#id 2.需要显示的div需要自己设置css 3.在ie6下需要设置css 例如div {_position: absolute;_top

  • javascript div 遮罩层封锁整个页面

    具体解决方案如下: 一.IE和FF下document.body对象的clientHeight,offsetHeight,scrollHeight属性的差别. clientHeight 在IE和FF下,该属性没什么差别,都是指浏览器的可视区域,即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度. offsetHeight 在IE下,offsetHeight也是浏览器可视区域的高(包括边线) 在FF下,offsetHeight是页面具体内容的高度 scrollHeight 在IE下,scroll

  • js点击按钮实现带遮罩层的弹出视频效果

    js点击按钮实现带遮罩层的弹出视频效果

    本文实例讲解了js点击按钮实现带遮罩层的弹出视频效果,涉及到css以及JavaScript,分享给大家供大家参考,具体内容如下 最终显示效果:点击红色按钮,会有视屏弹出 并带有遮罩层 点击黄色区域可以关闭视频 并回到最初的状态. 页面主要代码:main中主要包含一个a,控制显示的按钮.设置有id值. <div class="main"> <a href="javascript:;" class="video" id="

  • js弹出div并显示遮罩层

    复制代码 代码如下: //--------------------弹出层------------------- //popDivId:弹出层div的ID //dragDivId:用于拖动div的ID //isShowMask:是否显示遮罩层 function popDivShow(popDivId, dragDivId, isShowMask) { if (isShowMask) { creatMask(popDivId); } var oWins = document.getElementBy

  • 利用js实现遮罩以及弹出可移动登录窗口

    利用js实现遮罩以及弹出可移动登录窗口

    复制代码 代码如下: <!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>    <title></titl

  • html 锁定页面(js遮罩层弹出div效果)

    复制代码 代码如下: <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>UntitledDocument</title> <script> function createIf

  • js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)

    js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 复制代码 代码如下: <!doctype html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{}{margin:0;padding:0;} html{}{_background:url(about:blank);} /**//*

  • JS遮罩层效果 兼容ie firefox jQuery遮罩层

    复制代码 代码如下: <!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=&qu

  • JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法

    本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操作指定的内容,例如可以弹出一个登陆框之类的内容,下面就介绍一下如何实现此种效果,代码实例如下: 复制代码 代码如下: <!DOCTYPE html>    <html>    <head>    <meta charset=" utf-8">

随机推荐