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 相关文章推荐
一个cssQuery对象 javascript脚本实现代码
Jul 21 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
Apr 23 Javascript
多个datatable共存造成多个表格的checkbox都被选中
Jul 11 Javascript
node.js中使用socket.io制作命名空间
Dec 15 Javascript
javascript 获取浏览器版本
Jan 21 Javascript
jQuery前端分页示例分享
Feb 10 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 Javascript
vue首次赋值不触发watch的解决方法
Sep 11 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
Nov 26 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中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
php动态变量定义及使用
2015/06/10 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
JavaScript继承学习笔记【新手必看】
2016/05/10 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
[56:41]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs OG
2018/04/01 DOTA
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
python 从远程服务器下载日志文件的程序
2013/02/10 Python
Django实现分页功能
2018/07/02 Python
Python多继承以及MRO顺序的使用
2019/11/11 Python
python如果快速判断数字奇数偶数
2019/11/13 Python
一个精品风格的世界:Atterley
2019/05/01 全球购物
租房协议书
2014/09/12 职场文书
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书
高二数学教学反思
2016/02/18 职场文书
教学工作总结范文5篇
2019/08/19 职场文书
使用nginx配置访问wgcloud的方法
2021/06/26 Servers
简述Java中throw-throws异常抛出
2021/08/07 Java/Android
JS的深浅复制详细
2021/10/16 Javascript
实现一个简单得数据响应系统
2021/11/11 Javascript
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android