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, // 弹出文 ...
随机推荐
- POJ3281Dining[最大流]
Dining Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 16352 Accepted: 7307 Descripti ...
- ThreadLocal实现方式&使用介绍—无锁化线程封闭
原文出处: xieyu_zy 虽然现在可以说很多程序员会用ThreadLocal,但是我相信大多数程序员还不知道ThreadLocal,而使用ThreadLocal的程序员大多只是知道其然而不知其所以 ...
- jQuery ui 框架
jQuery ui框架很多,除了官方提供的jquery UI(如果你还不知道什么是jQuery UI,请看下载了jquery ui后如何使用),还有很多第三方提供的ui框架,因官方提供的jquery ...
- play with make
1) the VPATH variable In make world, the VPATH variable guide you where to find the .c/.o file 2) th ...
- IO（四）----对象的序列化
对象的序列化: 将内存中的对象直接写入到文件设备中. 对象的反序列化: 将文件设备中持久化的数据转换为内存对象. 自定义类只要实现了Serializable接口,便可以通过对象输入输出流对对象进行 ...
- StackExchange.Redis 访问封装类
最近需要在C#中使用Redis,在Redis的官网找到了ServiceStack.Redis,最后在测试的时候发现这是个坑,4.0已上已经收费,后面只好找到3系列的最终版本,最后测试发现还是有BUG或 ...
- Struts2 Validation学习
Every input is evil! ------------------------------华丽的分割线----------------------------------- 客户端提交的数 ...
- jQuery EasyUI视频教程合集
下载地址:http://www.fu83.cn/thread-269-1-1.html 教程内容: 尚学堂科技_jqueryeasyui视频教程_白贺翔 李炎恢jQuery EasyUI视频教程全集 ...
- 20145208 《Java程序设计》第0周学习总结
20145208 <Java程序设计>第0周学习总结 阅读心得 读了老师推荐的几个文章,虽然第四个文章"为什么一定要自学"报告资源不存在而无法阅读,其他的三篇文章都言之 ...
- Xamarin Mono For Android 4.6.07004 完整离线安装破解版（C#开发Android、IOS工具）
Xamarin是由Miguel de Icaza成立的一家新的独立公司,目的是给Mono一个继续奋斗的机会.Mono for Android (原名:MonoDroid)可以让开发人员使用 Mic ...