文档章节

js实现单击链接弹出DIV对话框并透明遮罩的效果代码

有资本再款
 有资本再款
发布于 2014/05/28 17:42
字数 375
阅读 32
收藏 0
<!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>js实现单击链接弹出DIV对话框并透明遮罩的效果代码</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> 点击“注册”按钮弹窗演示——IT知道网演示代码 </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>


本文转载自:http://hi.baidu.com/dangjun625/item/76d1efbadb7cdfa7eaba93d8

共有 人打赏支持
有资本再款
粉丝 5
博文 99
码字总数 16312
作品 0
黄冈
私信 提问
Dojo学习9 带背景遮罩的对话框:dijit.Dialog

带背景遮罩的对话框:dijit.Dialog 这个对话框通用性非常好。而且显示效果比较友好,能给使用者很好的体验。而且无论是正常方式,还是编程方式,实现起来都比较简单。 对话框包括两种,一种是...

元来元去
2010/11/02
0
0
Jquery超简单遮罩层实现代码

1.样式如下设置: CSS代码: <style type="text/css"> dialog{ z-index: 999; position: absolute; display: none; } mask { position: absolute; top: 0px; filter: alpha(opacity=60); bac......

~少司命~
2015/09/07
213
0
鼠标移入移出效果 -- jQuery/Vue版

元素内遮罩层根据鼠标方向显示的效果比较常见,比如百度图片里的图片信息展示。自己动手实现jQuery插件版和Vue组件版效果。 原文链接 实现思路 1、根据鼠标的位置定位在元素内出现的方向 2、...

bestvist
2018/06/22
0
0
ie下使用iframe的bug

今天用在线编辑器的时候发现个问题,在编辑器卸载的时候,火狐和chrome都正常,万恶的ie十有八九导致页面元素无法聚焦,文本框没法获得焦点,文字也不能选中,起初以为是被透明的层给遮罩了,...

布谷鸟
2012/04/12
4.2K
1
HTML5+CSS3+jQuery实现弹出层

文章来源于helloweba.com 一个基本的弹出层应该满足以下需求: 点击按钮/链接触发弹出层,弹出层应该有半透明的遮罩层; 点击弹出层的关闭按钮、取消按钮或者遮罩层会关闭隐藏弹出层; 使用E...

phala
2016/07/27
32
0

没有更多内容

加载失败,请刷新页面

加载更多

Nginx反向代理

Nginx反向代理 应用场景 A 机器运行的nginx提供的web服务,只有一个内网地址192.168.254.128(内网) B机器有两块网卡,一个地址是192.168.254.137(内网),另一个是192.168.79.128(外网)...

李超小牛子
今天
2
0
数据库事务隔离级别

当数据库上有多个事务同时执行的时候,可能出现下面问题: 脏读(dirty read):指当一个事务正在访问数据,并且对数据进行了修改,而这种修改还没有提交到数据库中,这时,另外一个事务也访...

Jacktanger
今天
1
0
4.61 - 第二个JAVA应用 4.62/63 - Tomcat的管理功能

4.61 - 第二个JAVA应用 方法一:配置文件: /usr/local/tomcat/conf/server.xml <Host name="www.aminglinux.cc" appBase="/data/wwwroot/www.aminglinux.cc" unpackWARs="tr......

Champin
今天
0
0
MariaDB密码重置

MariaDB密码重置 如果记得root的密码: mysqladmin -uroot -paminglinux password "aming-linux" //用此方式将原密码aminglinux重置为aming-linux 如果不记得原密码: # vi /etc/my.cnf......

wzb88
昨天
1
0
印度封禁抖音,称导致该国年轻人“文化堕落”!

本文经授权转载自顶级程序员 (ID:TopCoding) 作者 | 江户川雨 责编 | https://weavi.com/13775725 https://weavi.com/13775726 https://weavi.com/13775724 https://weavi.com/13775723 ......

陈刚生
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部