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 相关文章推荐
Extjs学习笔记之七 布局
Jan 08 Javascript
ExtJs使用总结(非常详细)
Mar 22 Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 Javascript
实例详解angularjs和ajax的结合使用
Oct 22 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
Vue v-bind动态绑定class实例方法
Jan 15 Javascript
Vue关于组件化开发知识点详解
May 13 Javascript
JS如何生成动态列表
Sep 22 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
Zerg基本策略
2020/03/14 星际争霸
在MongoDB中模拟Auto Increment的php代码
2011/03/06 PHP
php时间戳转换的示例
2014/03/31 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
一个经典的PHP文件上传类分享
2014/11/18 PHP
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
微信公众号平台接口开发 获取access_token过程解析
2019/08/14 Javascript
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
分享python数据统计的一些小技巧
2016/07/21 Python
python中hashlib模块用法示例
2017/10/30 Python
python编写弹球游戏的实现代码
2018/03/12 Python
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
python中property和setter装饰器用法
2019/12/19 Python
linux环境下安装python虚拟环境及注意事项
2020/01/07 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
2016/12/09 HTML / CSS
南威尔士家居商店:Leekes
2016/10/25 全球购物
应届生程序员求职信
2013/11/05 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
军训口号
2014/06/13 职场文书
课程设计的心得体会
2014/09/03 职场文书
增值税发票丢失证明
2015/06/19 职场文书
PL350与SW11的比较
2021/04/22 无线电
MySQL中in和exists区别详解
2021/06/03 MySQL