<!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>弹出提示</title>
<style>
* {margin:0;padding:0;font-size:12px;}
html,body {height:100%;width:100%;}
#content {background:#f8f8f8;padding:30px;height:100%;}
#content a {font-size:30px;color:#369;font-weight:700;}
#alert {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;}
</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>
<script type="text/javascript">
var myAlert = document.getElementById("alert");
var reg = document.getElementById("content").getElementsByTagName("a")[0];
var mClose = document.getElementById("close");
reg.onclick = function()
{
myAlert.style.display = "block";
myAlert.style.position = "absolute";
myAlert.style.top = "50%";
myAlert.style.left = "50%";
myAlert.style.marginTop = "-75px";
myAlert.style.marginLeft = "-150px";
mybg = document.createElement("div");
mybg.setAttribute("id","mybg");
mybg.style.background = "#000";
mybg.style.width = "100%";
mybg.style.height = "100%";
mybg.style.position = "absolute";
mybg.style.top = "0";
mybg.style.left = "0";
mybg.style.zIndex = "500";
mybg.style.opacity = "0.3";
mybg.style.filter = "Alpha(opacity=30)";
document.body.appendChild(mybg);
document.body.style.overflow = "hidden";
}
mClose.onclick = function()
{
myAlert.style.display = "none";
mybg.style.display = "none";
}
</script>
</body>
</html>
分享到:
相关推荐
Div 对话框 可移动 可设遮罩层 可以同时打开多个对话框,JS源代码
jQuery遮罩效果的弹出层对话框,本效果实现了4种弹出层效果:提示层、确认框提示层、alert提示层、删除商品提示层。当弹出层显示时,网页背景变暗,单击空白处可关闭弹出层。
JS弹DIV,遮罩层JS弹DIV,遮罩层JS弹DIV,遮罩层
js 遮罩层弹出对话框 很简单得 js 遮罩层弹出对话框 很简单得 js 遮罩层弹出对话框 很简单得
JS弹出Div+遮罩层,弹出遮罩后滚动条不可滚动。
jquery实现的 最中间弹出对话框,有遮罩层 对话框可以拖动兼容所有浏览器
Android AlertDialog对话框 自定义实现遮罩层
WPF弹出半透明遮罩,比较简单,适合初学者
JS可拖动窗口控件,可实现各种DIV窗口自定义及各种DIV弹出提示框 带遮罩层的DIV窗口(对话框)控件 js javascript 对话框
1 、半透明效果可以使用 css3 中的 opacity 属性,在低版本的IE浏览器中使用IE的alpha 滤镜。代码: .opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; } 2 、要覆盖整个可视区域通常的...
主要为大家详细介绍了js+html5实现半透明遮罩层弹框效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
不错的jQuery弹出层对话框插件,目前几个项目都在用,调用方便很实用,方便扩展; 对话框标题可自由拖动; 边框支持多浏览器半透明; 支持半遮罩背景设置; 支持回调函数使用; 传参方便,一行代码搞定调用,希望能...
一组非常好看的jQuery遮罩背景弹出层对话框插件,点击按钮弹出网页对话框代码,共有16种效果。
javascript 弹出遮罩层,弹出半透明的遮罩层并显示注册文本框内容,让网页更生动
点击弹出div圆角的遮罩层,可关闭,代码复制即用
js 弹出对话框(遮罩)透明,可拖动的简单实例 <html> <head> [removed] function sAlert(txt) { //var eSrc=(document.all)?window.event.srcElement:arguments[1]; var shield = document....
弹出Div层 不遮罩 可拖移的div层 用于Asp.net 是一个很好的例子
支持遮罩、拖动、嵌入页面、换肤等实用功能 调用简单,注释简明,更有详细样例! 支持ie、firefox、chrom
JQuery弹出有遮罩的对话框
js+html5实现半透明遮罩层弹框效果.docx