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, // 弹出文 ...
随机推荐
- HDU 1524 A Chess Game【SG函数】
题意:一个N个点的拓扑图,有M个棋子,两个人轮流操作,每次操作可以把一个点的棋子移动到它的一个后继点上(每个点可以放多个棋子),直到不能操作,问先手是否赢. 思路:DFS求每个点的SG值,没有后继的点 ...
- 一段拼装sql的小代码
/** * 单表查询 * * className:实体类的名字 * vals:查询的属性 * pNames:条件的名字 * pVals:条件的值 */ @Override public List< ...
- java 一些图片
- JAVA object
1.toString 把对象变成字符串 对于一个引用型变量toString写不写都是一样的 2.equals() 比较两个对象的引用是否一样. 3. public class EqualsTest ...
- Android 图文数据JSON解析，金山词霸每日一句API的调用
金山词霸开发的免费API http://open.iciba.com/dsapi/ 数据格式为 {","name":"\u7535\u5f71\u7ecf\u5 ...
- 【技术贴】大型发布会现场的WiFi网络应该如何搭建？
WiFi网络的部署要远远比一般人想象的复杂,不是说放上几十个AP带宽就自动增加几十倍,恰恰相反,简单放几十个AP带宽会由于AP之间的竞争而 迅速使带宽下降为几乎不可用.实际上这个问题完全可以写一本书了 ...
- NVelocity解析字符串
之前都是先从模板文件里面读取html字符串,现在要求将模板存入数据库或缓存了,怎么办呢?在网上找了下资料,终于找到解决办法. 如下: public class NVelocityHelper { // ...
- JavaScript之命名空间模式 浅析
来源于:http://www.cnblogs.com/syfwhu/p/4885628.html 前言 命名空间可以被认为是唯一标识符下代码的逻辑分组.为什么会出现命名空间这一概念呢?因为可用的单词数 ...
- 支付宝AR红包引出Python中的PIL小试
这两天支付宝AR红包火了,周围的同学全在玩.可是我一直在想这个原理是什么?通过请教大神和思考,知道了它有两个限定条件:GPS地理位置和图片的识别.所以,只要我们有了这两个限定条件,就不难进行该红包的破 ...
- Servlet和JSP学习指导与实践（一）：Servlet API初探
前言: JavaSE如何跨度到JavaEE?原本java语言只是专门用于application桌面小应用程序的开发,但自从其追随CGI进入服务器端的开发之后便一发不可收拾.先是Servlet1.0,再 ...