js实现遮罩层弹出框的方法


Posted in Javascript onJanuary 15, 2015

本文实例讲述了js实现遮罩层弹出框的方法。分享给大家供大家参考。具体分析如下:

昨天公司网站需要弹窗提示一些信息,要我在把弹窗的js代码和弹窗窗口html写在一起哪里需要就调用

不说那么多了,直接上代码,感觉肯定会有兼容问题,看到了请指出啊:

<style>

    #H-dialog{display:none;position:absolute;z-index: 9999999;width:400px;height: auto; background-color: #fff;}

    #H-dialog .close{float:right;font-size: 30px;margin-right: 10px;margin-top:5px;cursor:pointer;}

    #H-dialog .title{height: 40px;padding-left:10px; font-size:20px; line-height:40px;}

    #H-dialog #msgCont{height:36px; margin: 30px 0 50px;padding-left: 65px;font-size: 25px;line-height: 36px;vertical-align: middle; background: url(../Images/ui_alert.png) no-repeat 20px 50%;}

</style>

<div id="H-dialog">

    <a class="close" onclick="popupClose(this)">×</a>

    <div class="title">提示</div>

    <div id="msgCont">内容</div>

</div>
<script type="text/javascript">

    //锁定背景屏幕

    function lockScreen() {

        var clientH = document.body.offsetHeight; //body高度

        var clientW = document.body.offsetWidth; //body宽度

        var docH = document.body.scrollHeight; //浏览器高度

        var docW = document.body.scrollWidth; //浏览器宽度

        var bgW = clientW > docW ? clientW : docW; //取有效宽

        var bgH = clientH > docH ? clientH : docH; //取有效高

        var blackBg = document.createElement("div");

        blackBg.id = "blackBg";

        blackBg.style.position = "absolute";

        blackBg.style.zIndex = "99999";

        blackBg.style.top = "0";

        blackBg.style.left = "0";

        blackBg.style.width = bgW+"px";

        blackBg.style.height = bgH+"px";

        blackBg.style.opacity = "0.4";

        blackBg.style.backgroundColor = "#333";

        document.body.appendChild(blackBg);

    }

    //关闭按钮事件

    function popupClose(el) {

        var blackBg = document.getElementById("blackBg");

        blackBg && document.body.removeChild(blackBg);

        el.parentNode.style.display = "none";

    }

    //自动关闭

    function autoClose(id) {

        id = id || "H-dialog";

        var blackBg = document.getElementById("blackBg");

        var objDiv = document.getElementById(id);

        setTimeout(function(){

            blackBg && document.body.removeChild(blackBg);

            objDiv.style.display = "none";

        },2000);

    }

    /**

    *功能 : 弹窗信息

    *参数1 : 提示信息内容

    *参数2 : 提示信息状态默认0 为提示信息,1为成功信息

    *参数3 : 弹窗div的id,默认"H-dialog"

    *参数4 : 弹窗内容的id,默认"msgCont"

    **/

    function showMsg(msg) {

        msg = msg || "请重新操作";

        var status = arguments[1] || 0,

        popupId = arguments[2] || "H-dialog",

        contentId = arguments[3] || "msgCont";       

        lockScreen();

        //屏幕实际高宽

        var pageWidth = window.innerWidth;

        var pageHeight = window.innerHeight;

        if (typeof pageWidth != "number") {

            if (document.compatMode == "CSS1Compat") {

                pageWidth = document.documentElement.clientWidth;

                pageHeight = document.documentElement.clientHeight;

            } else {

                pageWidth = document.body.clientWidth;

                pageHeight = document.body.clientHeight;

            }

        }

        //滚动条高宽

        var scrollLeft = window.document.documentElement.scrollLeft;

        var scrollTop = 0;

        if (typeof window.pageYOffset != 'undefined') {

            scrollTop = window.pageYOffset;

        } else if (typeof window.document.compatMode != 'undefined' &&

            window.document.compatMode != 'BackCompat') {

            scrollTop = window.document.documentElement.scrollTop;

        } else if (typeof window.document.body != 'undefined') {

            scrollTop = window.document.body.scrollTop;

        }
        var div_X = (pageWidth - 400) / 2 + scrollLeft;

        var div_Y = (pageHeight - 200) / 2 + scrollTop;

        var objDiv = document.getElementById(popupId);

        if (status) {

            document.getElementById(contentId).style.background = "url($Root/Assets/Images/ui_success.png) no-repeat 20px 50%";

        }

        document.getElementById(contentId).innerHTML = msg;

        objDiv.style.display = "block";

        objDiv.style.left = div_X + "px";

        objDiv.style.top = div_Y + "px";

        autoClose(popupId);

    }

</script>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jQuery Div中加载其他页面的实现代码
Feb 27 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
JQuery中getJSON的使用方法
Dec 13 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
Nov 30 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
jQuery插件windowScroll实现单屏滚动特效
Jul 14 Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 Javascript
jquery判断input值不为空的方法
Jun 05 Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 Javascript
JS排序之冒泡排序详解
Apr 08 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
基于Webpack4和React hooks搭建项目的方法
Feb 05 Javascript
jquery隔行换色效果实现方法
Jan 15 #Javascript
JavaScript中实现依赖注入的思路分享
Jan 15 #Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 #Javascript
28个常用JavaScript方法集锦
Jan 14 #Javascript
jquery单选框radio绑定click事件实现方法
Jan 14 #Javascript
jquery移动节点实例
Jan 14 #Javascript
jquery获取checkbox的值并post提交
Jan 14 #Javascript
You might like
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
PHP学习之数组值的操作
2011/04/17 PHP
PHP操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
php中使用gd库实现下载网页中所有图片
2015/05/12 PHP
如何使用PHP对网站验证码进行破解
2015/09/17 PHP
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
Prototype String对象 学习
2009/07/19 Javascript
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
jQuery实现6位数字密码输入框
2016/12/29 Javascript
BootStrap表单验证实例代码
2017/01/13 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
基于python时间处理方法(详解)
2017/08/14 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
TensorFlow索引与切片的实现方法
2019/11/20 Python
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
音乐表演专业毕业生求职信
2013/10/14 职场文书
中学教师教育感言
2014/02/21 职场文书
2014年采购部工作总结
2014/11/20 职场文书
小学英语复习计划
2015/01/19 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python