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 点击整页变灰的效果(可做退出效果)。
Jan 09 Javascript
JavaScript 变量作用域分析
Jul 04 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
Node.js中使用jQuery的做法
Aug 17 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
Oct 17 Javascript
JS匿名函数实例分析
Nov 26 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 Javascript
angular 实时监听input框value值的变化触发函数方法
Aug 31 Javascript
Javascript通过控制类名更改样式
May 24 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
JavaScript原型链详解
Nov 07 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 多个submit提交表单 处理方法
2009/07/07 PHP
PHP 冒泡排序算法的实现代码
2010/08/08 PHP
destoon二次开发入门示例
2014/06/20 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报
2015/05/29 DOTA
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
python实现指定字符串补全空格的方法
2015/04/30 Python
简单介绍Python中的decode()方法的使用
2015/05/18 Python
详解Python文件修改的两种方式
2019/08/22 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
python求前n个阶乘的和实例
2020/04/02 Python
python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)
2020/04/08 Python
python使用numpy中的size()函数实例用法详解
2021/01/29 Python
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
日本最新流行服饰网购:Nissen
2016/07/24 全球购物
美国户外服装和装备购物网站:Outland USA
2020/03/22 全球购物
中专生毕业自我鉴定
2013/11/01 职场文书
消防先进事迹材料
2014/02/10 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
个人培训自我鉴定
2014/03/28 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
督导岗位职责
2015/02/04 职场文书
2015年中个人总结范文
2015/03/10 职场文书
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL
Go语言读取txt文档的操作方法
2022/01/22 Golang