js+CSS实现弹出居中背景半透明div层的方法
作者：代码家园 发布时间：2024-04-18 10:52:51
标签：js,CSS,弹出,div层,方法
本文实例讲述了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程序设计有所帮助。
0
投稿猜你喜欢
- Python 对代码的缩进要求非常严格，同一个级别代码块的缩进量必须一样，否则解释器会报 SyntaxError 异常错误。在 Python
一、构建示例数据import pandas as pdimport numpy as npdata = {"ID":[2- 作业备份，不是备份数据库，是备份作业。 我的方法是把作业导出成文件备份起来，因为当你服务器维护的多了的时候很多你的作业 就很成问题，很麻烦。
- 说明1、ChainMap的主要用例是提供一种有效的方法来管理多个范围或上下文，并处理重复键的访问优先级。2、当有多个存储重复键的字典访问它们
- 一、写在前面说道程序员，你会想到什么呢？有人认为程序员象征着高薪，有人认为程序员都是死肥宅，还有人想到的则是996和 ICU。别人眼中的程序
- 假设某宝为鼓励大家双12买买买，奖励双十一那天订单最多的两位用户：分别是用户1：“剁手皇帝陈哈哈” 和 用户2：“触手怪刘大莉” 一人一万元
- 1，GallerificGalleriffic 是使用 Mike Alsup 的 jQuery Cycle plugin 创建的图片展示效果
- <!--#include file="strcheck.asp"--> <％ '笔者在写程序的
- 当存储一个CHAR值时， Mysql会除去尾随空间, 这个行为有点让人困惑， 用一个具体的例子来看一下： 首先 ，创建一个只有一个CHAR(
- 本文实例讲述了go语言日志记录库简单使用方法。分享给大家供大家参考。具体实现方法如下：package mainimport ( &
- 测试数据：坐标数据：testExcelData.xlsx使用python读取excel文件需要安装xlrd库：xlrd下载后的压缩文件：xl
- 本文实例讲述了Thinkphp 框架基础之源码获取、环境要求与目录结构。分享给大家供大家参考，具体如下：获取ThinkPHP获取ThinkP
- 后端:from rest_framework.views import APIViewfrom car import settingsfro
- 代码如下# 爬取网易音乐import requestsfrom bs4 import BeautifulSoupimport urllib.
- 分形，具有以非整数维形式充填空间的形态特征。通常被定义为“一个粗糙或零碎的几何形状，可以分成数个部分，且每一部分都（至少近似地）是整体缩小后
- 作为主题的制作者, 除了实现功能, 展示界面, 还有责任使主题灵活多变, 以满足更多人不同的需求.可能一些朋友曾为选用双栏主题 (单侧边栏)
- PHP crypt() 函数定义和用法crypt() 函数返回使用 DES、Blowfish 或 MD5 算法加密的字符串。在不同的操作系统
- 在 IT 开发中，有时我们需要对结构体数组进行排序。Go 语言提供了 sort 包，其中最常用的一种是 sort.Slice() 函数。但是
- 本文实例讲述了python根据出生日期获得年龄的方法。分享给大家供大家参考。具体如下：这段代码可以根据用户的出生日期获得其年龄，born参数
- 简介卷积神经网络(Convolutional Neural Network, CNN)是深度学习技术中极具代表的网络结构之一，在图像处理领域
