1.在web开发中经常遇到遮罩层的效果,可以将这种常用方法通用化

     function showid(idname){
var isIE = (document.all) ? true : false;
var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);
var newbox = document.getElementById(idname);
newbox.style.zIndex = "9999999";
newbox.style.display = "block"
newbox.style.position = !isIE6 ? "fixed" : "absolute";
newbox.style.top = newbox.style.left = "50%";
newbox.style.marginTop = -newbox.offsetHeight / 2 + "px";
newbox.style.marginLeft = -newbox.offsetWidth / 2 + "px";
var layer = document.createElement("div");
layer.id = "layer";
layer.style.width = layer.style.height = "100%";
layer.style.position = !isIE6 ? "fixed" : "absolute";
layer.style.top = layer.style.left = 0;
layer.style.backgroundColor = "#888";
layer.style.zIndex = "9999998";
layer.style.opacity = "0.6";
document.body.appendChild(layer); function layer_iestyle(){
layer.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) +
"px";
layer.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) +
"px";
}
function newbox_iestyle(){
newbox.style.marginTop = document.documentElement.scrollTop - newbox.offsetHeight / 2 + "px";
newbox.style.marginLeft = document.documentElement.scrollLeft - newbox.offsetWidth / 2 + "px";
}
if (isIE) {
layer.style.filter = "alpha(opacity=60)";
}
if (isIE6) {
layer_iestyle()
newbox_iestyle();
window.attachEvent("onscroll", function(){
newbox_iestyle();
})
window.attachEvent("onresize", layer_iestyle)
} }

js遮罩层弹出显示效果组件化的更多相关文章

  1. JS遮罩层弹框效果

    对于前端开发者来说,js是不可缺少的语言.现在我开始把我日常积累的一些js效果或者通过搜索自己总结的一些效果分享给大家,希望能够帮助大家一起进步,也希望大家能够多多支持! 1.今天我先分享一个遮罩层弹 ...

  2. JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法

    本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操 ...

  3. js进阶 11-20 弹出层如何制作

    js进阶 11-20 弹出层如何制作 一.总结 一句话总结:其实就是一个div,控制显示和隐藏即可.设置成绝对定位更好,就可以控制弹出层出现的位置.关闭的画质需要将display重新设置为none就好 ...

  4. 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选

    原生Js封装的弹出框-弹出窗口-页面居中-多状态可选   实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...

  5. 小巧、高效、美观的弹出日历组件 ——lhgcalendar

    http://www.cnblogs.com/lhgstudio/archive/2009/02/13/1390381.html 没法上传附件,请到以上地址下载 下载地址:http://files.c ...

  6. 关于隐式创建vue实例实现简化弹出框组件显示步骤

    我们在使用vue写alert组件的时候,经常是定义了一个alert.vue,然后引入alert.vue,然后配置参数等等,非常繁琐,那有没有一种方式可以像window.alert("内容&q ...

  7. Flex AIR自定义Mobile的弹出框组件

    做Flex Mobile开发的人应该知道,Flex为手机应用并没有提供弹出框组件,需要自定义. 通过查找文档.资料,我做出一个效果还算不错的弹出框组件,可以适用于手机设备上,不多讲,直接贴源码,相信对 ...

  8. 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框

    vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...

  9. js点击弹出div层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. JS—正则表达式

    正则表达式的元字符是包含特殊含义的字符,它们有一些特殊的功能,可以控制匹配模式的方式,反斜杠后的元字符失去其特殊含义. 单个字符和数字 .表示匹配除换行符外的单个字符,两个.就表示匹配两个字符 var ...

  2. linux ssh 登录服务器失败,密码明明没错【解决】

    本来这样登录的: $ ssh 123.123.123.123 //ssh + IP 然后输入密码就是登录不了,显示permision denied 后来使用如下方式登录,成功! $ ssh -v us ...

  3. opencv对鼠标的响应

    #include <cv.h> #include <highgui.h> #include <stdio.h>   #pragma comment(lib,&quo ...

  4. Python3 list记录

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- # Author;Tsukasa name = ['YangJiaHui','LiuYueEr','TaB ...

  5. 操作JSON————精品

    使用背景: JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原 ...

  6. Dijkstra【p4943】密室

    Description 密室被打开了. 哈利与罗恩进入了密室,他们发现密室由n个小室组成,所有小室编号分别为:1,2,...,n.所有小室之间有m条通道,对任意两个不同小室最多只有一条通道连接,而每通 ...

  7. pythonGUI编程用Canvas模拟画板

    代码如下: from tkinter import * import webbrowser root = Tk() w = Canvas(root,width=400,height=200) w.pa ...

  8. PythonGUI编程--向列表框添加滚动条

    代码如下: from tkinter import * window = Tk() window.title("New England") yscroll = Scrollbar( ...

  9. Java架构师之路 Spring学习笔记(一) Spring介绍

    前言 这是一篇原创的Spring学习笔记.主要记录我学习Spring4.0的过程.本人有四年的Java Web开发经验,最近在面试中遇到面试官总会问一些简单但我不会的Java问题,让我觉得有必要重新审 ...

  10. Java - Struts框架教程 Hibernate框架教程 Spring框架入门教程(新版) sping mvc spring boot spring cloud Mybatis

    https://www.zhihu.com/question/21142149 http://how2j.cn/k/hibernate/hibernate-tutorial/31.html?tid=6 ...