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中执行任意html代码的方法示例解读
Dec 25 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
javascript得到当前页的来路即前一页地址的方法
Feb 18 Javascript
使用documentElement正确取得当前可见区域的大小
Jul 25 Javascript
JS函数this的用法实例分析
Feb 05 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
javascript先序遍历DOM树的方法
Feb 27 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 Javascript
微信小程序 sha1 实现密码加密实例详解
Jul 06 Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
Echarts如何重新渲染实例详解
May 30 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 面向对象 PHP5 中的常量
2010/05/05 PHP
php数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
fancybox modal的完美解决(右上的X)
2012/10/30 Javascript
Textarea根据内容自适应高度
2013/10/28 Javascript
JS获取键盘上任意按键的值(实例代码)
2013/11/12 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
SinaEditor使用方法详解
2013/12/28 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
JS对象创建的几种方式整理
2017/02/28 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
javascript实现简单搜索功能
2020/03/26 Javascript
浅析JavaScript 函数柯里化
2020/09/08 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
python optparse模块使用实例
2015/04/09 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
Python使用Pandas对csv文件进行数据处理的方法
2019/08/01 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
Python基于staticmethod装饰器标示静态方法
2020/10/17 Python
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
化工专业推荐信范文
2013/11/28 职场文书
车间操作工岗位职责
2013/12/19 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
小学班级口号大全
2015/12/25 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
Hive导入csv文件示例
2022/06/25 数据库