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


Posted in Javascript onFebruary 26, 2015

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

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>js+CSS弹出居中的背景半透明div层</title>

<style type="text/css">

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;}

</style>

<script type="text/javascript">

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" ; 

}

</script>

</head>

<body>

 </br>

CSS弹出层,或者说是弹出窗口,背景半透明风格的弹出框,</br>在网站登录、用户注册、公告提示方面都非常适合使用。</br>IE和FF,OP均可以~弹出窗口,背景半透明 </br>
原理:两个层,一个高度和宽度都是100%,另一个就是你要弹出的窗口的具体内容,</br>半透明在IE中是用filter: Alpha(opacity=60);在非IE中用opacity:0.60; 

</br></br>
 <a href="#" onclick="pupopen()">点击这里打开窗口</a>

<div id="bg"></div>

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

<br>

<br>

<br>

<a href="#"  onclick="pupclose()">点击关闭窗口</a>

</div>

</body>

</html>

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

Javascript 相关文章推荐
javascript函数库-集合框架
Apr 27 Javascript
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
javascript获得当前的信息的一些常用命令
Feb 25 Javascript
AngularJS快速入门
Apr 02 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
利用Angularjs实现幻灯片效果
Sep 07 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
Dec 01 Javascript
JS实现根据密码长度显示安全条功能
Mar 08 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
Sep 28 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 Javascript
js使用post 方式打开新窗口
Feb 26 #Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 #Javascript
JS实现跟随鼠标闪烁转动色块的方法
Feb 26 #Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 #Javascript
JS实现网页滚动条感应鼠标变色的方法
Feb 26 #Javascript
js随机生成网页背景颜色的方法
Feb 26 #Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 #Javascript
You might like
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
php技巧小结【推荐】
2017/01/19 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
2007/01/09 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
jquery实现文字由下到上循环滚动的实例代码
2013/08/09 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
javascript 实现动态侧边栏实例详解
2016/11/11 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
Vue2单一事件管理组件通信
2017/05/09 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
python中os模块详解
2016/10/14 Python
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
python命令 -u参数用法解析
2019/10/24 Python
python的等深分箱实例
2019/11/22 Python
python生成并处理uuid的实现方式
2020/03/03 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
手工制作的意大利礼服鞋:Ace Marks
2018/12/15 全球购物
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
国际贸易专业个人职业生涯规划
2014/02/15 职场文书
如何写早恋检讨书
2014/09/10 职场文书
2014年宣传工作总结
2014/11/18 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书