html 弹出层边框半透明,js+CSS实现弹出居中背景半透明div层的方法

本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法。分享给大家供大家参考。具体实现方法如下：

js+CSS弹出居中的背景半透明div层

body{margin:0px;}

#bg{width:100%;height:100%;top:0px;left:0px;position:absolute;filter: Alpha(opacity=50);opacity:0.5; background:#000000; display:none;}

#popbox{position:absolute;width:400px; height:400px; left:50%; top:50%; margin:-200px 0 0 -200px; display:none; background:#666666;}

function pupopen(){

document.getElementById("bg").style.display="block";

document.getElementById("popbox").style.display="block" ;

}

function pupclose(){

document.getElementById("bg").style.display="none";

document.getElementById("popbox").style.display="none" ;

}

CSS弹出层，或者说是弹出窗口，背景半透明风格的弹出框，在网站登录、用户注册、公告提示方面都非常适合使用。IE和FF,OP均可以~弹出窗口,背景半透明

原理:两个层,一个高度和宽度都是100%,另一个就是你要弹出的窗口的具体内容,半透明在IE中是用filter: Alpha(opacity=60);在非IE中用opacity:0.60;

　　点击这里打开窗口

两个层,一个高度和宽度都是100%,另一个就是你要弹出的窗口的具体内容,半透明在IE中是用filter: Alpha(opacity=60);在非IE中用opacity:0.60;

点击关闭窗口

希望本文所述对大家的javascript程序设计有所帮助。

html 弹出层边框半透明,js+CSS实现弹出居中背景半透明div层的方法相关推荐

JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操 ...
码匠编程：CSS让元素绝对居中，你知道几种方法？
经常碰到有同学在问,如何让一个元素上下左右都居中呢? 相信大家在面试的时候也会经常碰到这个问题,一下列出来几种方式以供大家参考,如有不足之处,请大家补充问题描述: 给定两个元素,这两个元素是父子级关 ...
html中利用js写一个弹出注册框,原生js实现一个弹出框
其实弹出框的实现非常的简单.网上有很多种类的弹出框,比如jquery ui 的dialog colorbox fancybox等.jquery ui的dialog是一个专业的对话框而colorbox ...
web项目中关于引入JS/css文件, 浏览器console出现 net::ERR_ABORTED错误的解决方法
如图错误: 引入js/css后,控制台出现的错误! 我的错误则是因为在静态文件夹下的原因. 解决:如果要放在webRoot下的静态(static)文件夹下,需要在springMvc的配置文件中添加上注 ...
JS+CSS+SVG实现动态星空背景
效果图: <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...
CSS进阶（一）背景与边框
CSS进阶(一)背景与边框文章目录 CSS进阶(一)背景与边框一.浏览器前缀二.CSS编码技巧 1.尽量减少代码重复(可复用性) (1)当某些值相互依赖时,应该把他们的相互关系用代码表示出来 ( ...
html边框绕着图片,CSS 边框
CSS 边框在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使用 CSS 边框属性,我们可以创建出效果出色的边框,并且可以应用于任何元素. 元素外边距内就是元素的的边框 (border) ...
maven js css 压缩,使用wro4j和maven在编译期间压缩js和css文件（经典）
最近在对一个web系统做性能优化. 而对用到的静态资源文件的压缩整合则是前端性能优化中很重要的一环. 好处不仅在于能够减小请求的文件体积,而且能够减少浏览器的http请求数. 因为是基于java的we ...
CSS揭秘：5.条纹背景（上）
文章目录条纹背景 CSS线性渐变 css线性渐变小结 background-size 水平条纹水平 First Try 水平 Second Try 水平 Third Try 水平 Forth Tr ...

html 弹出层边框半透明,js+CSS实现弹出居中背景半透明div层的方法

html 弹出层边框半透明,js+CSS实现弹出居中背景半透明div层的方法相关推荐

最新文章

热门文章

html 弹出层 边框半透明,js+CSS实现弹出居中背景半透明div层的方法

html 弹出层 边框半透明,js+CSS实现弹出居中背景半透明div层的方法相关推荐

最新文章

热门文章

html 弹出层边框半透明,js+CSS实现弹出居中背景半透明div层的方法

html 弹出层边框半透明,js+CSS实现弹出居中背景半透明div层的方法相关推荐