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&period;prompt弹出文本输入层，多个按钮回调获取输入值
JS中通过LayUI弹出文本输入层,多个按钮回调: 如图所示,输入文本后点击通过/不通过按钮回调获取输入文本值的实现: 实现JS: layer.prompt({ formType: 2, // 弹出文 ...

随机推荐

Python&colon; 收集所有命名参数
有时候把Python函数调用的命名参数都收集到一个dict中可以更方便地做参数检查,或者直接由参数创建attribute等.更简单的理解就是def foo(*args, **kwargs): pass ...
swift中文文档- 类型转换
未翻译完待续(英语烂,求斧正) Type Casting 类型转换 Type casting is a way to check the type of an instance, and/or to ...
Docker跨主机通信之路由
一.实验环境: 主机名主机IP Docker0_IP Docker1 192.168.88.130 172.17.0.1 Docker2 192.168.88.131 172.18.0.1 二.实验 ...
Hooks——钩子概览
(资料源于MSDN,本文仅对其进行翻译.批注.其链接为:http://msdn.microsoft.com/en-us/library/windows/desktop/ms644959%28v=vs. ...
Android（java）学习笔记123：Clock app编写报错01
1.首先我们二话不说直接先看报错内容如下: 07-12 08:25:03.572: E/dalvikvm(3602): native fork pid:0 done. 07-12 08:25:03.5 ...
underscorejs-where学习
2.7 where 2.7.1 语法: _.where(list, predicate) 2.7.2 说明: 对list集合的每个对象依次与predicate对象进行匹配,返回一个数组(数组为匹配成功 ...
数据结构《17》---- 自己主动补齐之《二》----Ternary Search Tree
一. 序言上一篇文章中,给出了 trie 树的一个实现. 能够看到,trie 树有一个巨大的弊病,内存占用过大. 本文给出还有一种数据结构来解决上述问题---- Ternary Search Tre ...
Hi3531用SPI FLASH启动使用Nand做文件系统
1.编译内核(可选) make ARCH=arm CROSS_COMPILE=arm-hisiv200-linux- menuconfig make ARCH=arm CROSS_COMPILE=ar ...
thinkPHP框架5&period;0 类图下载
thinkPHP5.0 类图下载
Confluence设置MySQL数据库报错：必须使用&&num;39&semi;READ-COMMITTED&&num;39&semi;作为默认隔离级别。
解决方案: mysql -u root -p123456 SET GLOBAL tx_isolation='READ-COMMITTED'; mysql数据库创建 1.设置mysql隔离级别 SET ...