js简单弹出层、遮罩层
<html>
<head>
<title>js简单弹出层</title> <style>
/*阴影边框效果*/
.box-shadow-1 {
-webkit-box-shadow: 3px 3px 3px;
-moz-box-shadow: 3px 3px 3px;
box-shadow: 3px 3px 3px;
} .box-shadow-2 {
-webkit-box-shadow: 0 0 10px #0CC;
-moz-box-shadow: 0 0 10px #0CC;
box-shadow: 0 0 10px #0CC;
} .box-shadow-3 {
-webkit-box-shadow: 0 0 10px rgba(0, 204, 204, .5);
-moz-box-shadow: 0 0 10px rgba(0, 204, 204, .5);
box-shadow: 0 0 10px rgba(0, 204, 204, .5);
} .box-shadow-4 {
-webkit-box-shadow: 0 0 10px 15px #0CC;
-moz-box-shadow: 0 0 10px 15px #0CC;
box-shadow: 0 0 10px 15px #0CC;
} .box-shadow-5 {
-webkit-box-shadow: inset 0 0 10px #0CC;
-moz-box-shadow: inset 0 0 10px #0CC;
box-shadow: inset 0 0 10px #0CC;
} .box-shadow-6 {
box-shadow: -10px 0 10px red, /*左边阴影*/
10px 0 10px yellow, /*右边阴影*/
0 -10px 10px blue, /*顶部阴影*/
0 10px 10px green; /*底边阴影*/
} .box-shadow-7 {
box-shadow: 0 0 10px 5px black, 0 0 10px 20px red;
} .box-shadow-8 {
box-shadow: 0 0 10px 20px red, 0 0 10px 5px black;
} .box-shadow-9 {
box-shadow: 0 0 0 1px red;
} .obj {
width: 100px;
height: 100px;
margin: 50px auto;
background: #eee;
} .outer {
width: 100px;
height: 100px;
border: 1px solid red;
} .inner {
width: 60px;
height: 60px;
background-color: red;
-webkit-box-shadow: 50px 50px blue;
-moz-box-shadow: 50px 50px blue;
box-shadow: 50px 50px blue;
}
</style> <script type="text/javascript">
/*
* 弹出DIV层1
*/
function Ceng() {
document.getElementById('ceng').style.display = 'block';
document.getElementById('close').style.display = 'block';
return false;
}
function closeCeng() {
document.getElementById('ceng').style.display = 'none';
document.getElementById('close').style.display = 'none';
return false; } /*
* 弹出DIV层2
*/
function showDiv() {
var Idiv = document.getElementById("Idiv");
var mou_head = document.getElementById('mou_head');
Idiv.style.display = "block";
//以下部分要将弹出层居中显示
Idiv.style.left = (document.documentElement.clientWidth - Idiv.clientWidth) / 2 + document.documentElement.scrollLeft + "px";
Idiv.style.top = (document.documentElement.clientHeight - Idiv.clientHeight) / 2 + document.documentElement.scrollTop - 50 + "px"; //以下部分使整个页面至灰不可点击
var procbg = document.createElement("div"); //首先创建一个div
procbg.setAttribute("id", "mybg"); //定义该div的id
procbg.style.background = "#000000";
procbg.style.width = "100%";
procbg.style.height = "100%";
procbg.style.position = "fixed";
procbg.style.top = "0";
procbg.style.left = "0";
procbg.style.zIndex = "500";
procbg.style.opacity = "0.6";
procbg.style.filter = "Alpha(opacity=70)";
//背景层加入页面
document.body.appendChild(procbg);
document.body.style.overflow = "hidden"; //取消滚动条 //以下部分实现弹出层的拖拽效果
var posX;
var posY;
mou_head.onmousedown = function (e) {
if (!e) e = window.event; //IE
posX = e.clientX - parseInt(Idiv.style.left);
posY = e.clientY - parseInt(Idiv.style.top);
document.onmousemove = mousemove;
}
document.onmouseup = function () {
document.onmousemove = null;
}
function mousemove(ev) {
if (ev == null) ev = window.event;//IE
Idiv.style.left = (ev.clientX - posX) + "px";
Idiv.style.top = (ev.clientY - posY) + "px";
}
}
function closeDiv() //关闭弹出层
{
var Idiv = document.getElementById("Idiv");
Idiv.style.display = "none";
document.body.style.overflow = "auto"; //恢复页面滚动条
var body = document.getElementsByTagName("body");
var mybg = document.getElementById("mybg");
body[0].removeChild(mybg);
}
</script>
</head>
<body>
<!--弹出层开始1-->
<a href="#" onclick="Ceng()">点击弹出1</a>
<div id="ceng" style="position:absolute;z-index:2;left:0;top:0;right:0;background-color:#000;filter:alpha(opacity=50);margin:1px 1px;display:none;width:100%;height:100%;text-align:center;">
</div>
<div id="close" style="position:absolute !important;left:30%;top:0px;z-index:3;border:1px solid #ff6600;background-color:#fff;margin:100px auto;padding:0px;display:none;width:400px;height:300px;text-align:right">
<a href="#" onclick="closeCeng()">关闭</a>
<div style="text-align:center;"><br>
<br> <a href="#">点击查看 >></a></div>
</div>
<!--结束--> <!--弹出层开始2-->
<a href="#" onclick="Ceng()">点击弹出2</a>
<div id="Idiv" style="display:none; position:absolute; z-index:1000; background:#67a3d9;">
<div id="mou_head" style="width:100px; height:10px;z-index:1001; position:absolute;">这个是用来实现拖层</div>
<input type="button" value="关闭" onclick="closeDiv();" />
</div>
<!--结束--> <!--阴影边框效果-->
<div class="obj box-shadow-1"></div>
<div class="outer">
<div class="inner"></div>
</div>
<div class="obj box-shadow-2" ></div>
<div class="obj box-shadow-3" ></div>
<div class="obj box-shadow-4" ></div>
<div class="obj box-shadow-5" ></div>
<div class="obj box-shadow-6" ></div>
<div class="obj box-shadow-7" ></div>
<div class="obj box-shadow-8" ></div>
<div class="obj box-shadow-9" ></div>
<script type="text/javascript">
$(document).ready(function () {
if ($.browser.msie) {
$('.obj').boxShadow(-10, -10, 5, "#0cc"); //obj元素使用了box-shadow
}
});
</script>
</body>
</html>
遮罩层
<style type="text/css">
#zzc_bg
{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.7;
opacity: .70;
filter: alpha(opacity=70);
}
#zzc_show
{
display: none;
position: absolute;
top: 38%;
left: 45%;
width: 53%;
z-index: 1002;
}
#zzc_show span
{
font-size: 35px;
font-weight: bold;
color: White;
}
#zzc_show img
{
width: 50px;
height: 50px;
}
</style> <div id="zzc_bg">
</div>
<div id="zzc_show">
<span>98%</span>
<img src="../images/yuya_load.gif" />
</div> <script type="text/javascript" language="javascript">
var zzc_div = {
showdiv: function () {
document.getElementById("zzc_bg").style.height = window.screen.availHeight > document.body.clientHeight ? window.screen.availHeight : document.body.clientHeight;
document.getElementById("zzc_bg").style.display = "block";
document.getElementById("zzc_show").style.top = (document.documentElement.scrollTop + 170) + "px";
document.getElementById("zzc_show").style.display = "block";
},
hidediv: function hidediv() {
document.getElementById("zzc_bg").style.display = 'none';
document.getElementById("zzc_show").style.display = 'none';
}
}
</script>
js简单弹出层、遮罩层的更多相关文章
- js实现弹出窗口+遮罩层+tab切换
[功能1]点击约谈按钮,弹出对话框和遮罩层(自己的叫法 专业叫法没有查) [部分重点代码] [下面的方法] (1)获取系统时间如何实现(2)点击如何实现弹出窗口和遮罩层 $(".date_n ...
- jquery弹出关闭遮罩层实例
jquery弹出关闭遮罩层实例. 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" & ...
- html+css源码之实现登录弹出框遮罩层效果
在web开发中,很多网站都做了一些特别炫丽的效果,比如用户登录弹框遮罩层效果,本文章向大家介绍css如何实现登录弹出框遮罩层效果,需要的朋友可以参考一下本文章的源代码. html+css实现登录弹出框 ...
- 根据juery CSS点击一个标签弹出一个遮罩层的简单示例
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- jQuery点击图片弹出大图遮罩层
使用jQuery插件HoverTreeShow弹出遮罩层显示大图 效果体验:http://hovertree.com/texiao/hovertreeshow/ 在开发HoverTreeTop项目的产 ...
- jQuery弹出关闭遮罩层
效果体验:http://keleyi.com/keleyi/phtml/jquery/9.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
- 【Javascript Demo】谷歌地图简单实现（附遮罩层和弹出层实现）
虽然百度地图实现了,但只是国内的,而且前几天貌似还出问题了,对于国际的只能用谷歌地图了,所以就简单研究了下,做了个差不多的. 基本步骤,谷歌地图API文档其实写的很清楚了,先获取API密钥,然后引用j ...
- jquery 简单弹出层(转)
预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...
- JS中通过LayUI的layer.prompt弹出文本输入层，多个按钮回调获取输入值
JS中通过LayUI弹出文本输入层,多个按钮回调: 如图所示,输入文本后点击通过/不通过按钮回调获取输入文本值的实现: 实现JS: layer.prompt({ formType: 2, // 弹出文 ...
随机推荐
- 第5章 软件包管理（1）_RPM包安装
1. 软件包简介 1.1 软件包分类 (1)源码包:如C.C++源码包,脚本安装包执行后可以自动安装. (2)二进制包:Redhat系列(如CentOS):为RPM包,Debian系列(如ubuntu ...
- [No00005B] word快速插入当前时间&怎样一次性删除文档中的全部链接
按Alt+Shift+D键来插入系统日期 按Alt+Shift+T键则插入系统当前时间 同时,在插入的时间上右键->编辑域 一次性删除文档中的全部链接: 方法1:一劳永逸法(推荐) 因为链接大多 ...
- iOS 2D绘图 (Quartz 2D) 概述
本篇博客原文地址:http://blog.csdn.net/hello_hwc?viewmode=list 由于自己的项目需要,从网络上下载了许多关于绘制图形的demo,只是用在自己的项目中,很多地方 ...
- github使用技巧
转自:一秒钟把Github项目变成前端网站 后面加了一些自己的东西 一秒钟把Github项目变成前端网站 GitHub Pages大家可能都知道,常用的做法,是建立一个gh-pages的分支,通过se ...
- BZOJ 3505 【Cqoi2014】 数三角形
Description 给定一个nxm的网格,请计算三点都在格点上的三角形共有多少个. 下图为4x4的网格上的一个三角形. 注意三角形的三点不能共线. Input 输入一行,包含两个空格分隔的正整数m ...
- 基于Batcher比较器的双调排序网络
1. Batcher比较器 Batcher比较器是指如果在两个输入端给定输入x,y,再在两个输出端输出最大值max{x,y}和最小值min{x,y}.如图1所示,我们规定Batcher比较器的上输出端 ...
- unsafe clr sql 部署向导
1.部署安全权限的简单的程序集,非常简单,只需要正常发布就行,基本可以成功,前提是账号有部署clr assembly的权限 第一步: 创建登陆账号,尽量不要使用sa吧,默认架构为:dbo即可 第二部: ...
- RTC时钟
1.设置时间之前取消备份区域(BKP)写保护 主要有两部分组成 1.用来和APB1总线对接,对其进行读写操作 2. 预分频模块:在RTC_CR设置相应的允许,位每个TR_CLK周期中RTC产生一个中断 ...
- 使用VelocityTracker来完成MotionEvent移动速率计算
先看效果图 关键代码(此处记录单点): switch (event.getAction()){ case MotionEvent.ACTION_DOWN: if (veloctiy==null) { ...
- java 8
java 8 发布已经有一段时间了,然而很多新特性被拒之门外,让人敬而生畏,但是,时代在进步,技术在发展,要追随时代的脚步就要跟随新的潮流.总结下java 8 中常用的小功能点,学如逆水行舟,不进则退 ...