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, // 弹出文 ...
随机推荐
- 数字图像处理中的4邻接，8邻接与m邻接
像素之间的邻接性: 4邻接.如果q在集合N4(p)中,则具有V中数值的两个像素p和q是4邻接的. 8邻接.如果q在集合N8(p)中,则具有V中数值的两个像素p和q是8邻接的. m邻接(混合邻接).如果 ...
- jQuery超链接提示，提示跟随鼠标动
功能:实现鼠标移动到一个超链接时,鼠标右下角产生一个提示,并跟谁鼠标移动,知道鼠标离开超链接. 效果: 源码: <!--本案例是鼠标放在超链接上时,鼠标旁边有提示这是个超练级,以及放在图片上时图 ...
- 错题分析--ASP.NET
解析:支架模板支持的类型包括Empty.Create.Delete.Details.Edit.List 解析:Spring支持4种依赖检查:默认的是none.因此说法不正确的结果是D 解析:各层之间不 ...
- 国内外前端(js)开发框架对比
国内外前端开发框架对比 首先我们先对目前国内外主流前端开发框架做一个基本的了解,之后再对他们进行一个直观的对比. Bootstrap Bootstrap(http://www.bootcss.com) ...
- HDU 3032 Nim or not Nim (sg函数)
加强版的NIM游戏,多了一个操作,可以将一堆石子分成两堆非空的. 数据范围太大,打出sg表后找规律. # include <cstdio> # include <cstring> ...
- 关于javascript中apply()和call()方法的区别
如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的事偏偏就发生了,甚至觉得不可理喻.如果在学JavaScript这自由而变幻无穷的语 ...
- System.Diagnostics.Process 启动进程资源或调用外部的命令的使用
经常看到一些程序在保存为一个txt,或者excel的文件的时候,保存完毕立即打开, 启动程序或打开文件的代码 System.Diagnostics.Process.Start(System.IO.Pa ...
- 发布ASP.NET Core网站到IIS
打开VS2015,新建项目: 选择模板,取消身份验证: 项目加载完成后就可以运行了: 下面要发布到IIS: 需要安装从IIS到Kestrel server的反向代理,下载地址:.NET Core Wi ...
- 光盘刻录 CD刻录软件 Ashampoo Burning Studio特别版 刻录CD就这么简单
著名的刻录软件Nero,其近上百M体积实在太大,而且安装之后的文件体积也有上G多.这么大的体积安装使用都不方便,好在现在很多都做得很不错,比如阿香婆的光盘刻录软件Ashampoo® Burning S ...
- VS2010出现FileTracker : error FTK1011编译错误的解决办法
VS2010出现FileTracker : error FTK1011不知道是不是vs2010的一个bug,反正有人提交了. FileTracker : error FTK1011编译错误的解决办法有 ...