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 相关文章推荐
走出JavaScript初学困境—js初学
Dec 29 Javascript
通过正则格式化url查询字符串实现代码
Dec 28 Javascript
javascript预加载图片、css、js的方法示例介绍
Oct 14 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
Feb 15 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
JS排序之快速排序详解
Apr 08 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
May 08 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 Javascript
基于JS实现table导出Excel并保留样式
May 19 Javascript
vue中touch和click共存的解决方式
Jul 28 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
PHP中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
超级简单的php+mysql留言本源码
2009/11/11 PHP
php模板函数 正则实现代码
2012/10/15 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
JavaScript中的Location地址对象
2008/01/16 Javascript
IE和Firefox在JavaScript应用中的兼容性探讨
2008/04/01 Javascript
JS实现self的resend
2010/07/22 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
详解微信小程序支付流程与梳理
2019/07/16 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
vue自定义正在加载动画的例子
2019/11/14 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
初学python数组的处理代码
2011/01/04 Python
让Python代码更快运行的5种方法
2015/06/21 Python
Python和C/C++交互的几种方法总结
2017/05/11 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
numpy使用fromstring创建矩阵的实例
2018/06/15 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
python中os包的用法
2020/06/01 Python
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
Ralph Lauren意大利官方网站:时尚界最负盛名的品牌之一
2018/10/18 全球购物
俄罗斯名牌服装网上商店:UNIQUE FABRIC
2019/07/25 全球购物
表扬稿表扬信的格式及范文
2019/06/24 职场文书
导游词之河北邯郸
2019/09/12 职场文书
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS