`

网页中弹出悬浮层

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>悬浮框</title>
<style>
.black_overlay {
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index: 1001;
	-moz-opacity: 0.8;
	opacity: .80;
	filter: alpha(opacity = 80);
}

.white_content {
	display: none;
	position: absolute;
	top: 25%;
	left: 25%;
	width: 50%;
	height: 50%;
	padding: 16px;
	border: 16px solid orange;
	background-color: white;
	z-index: 1002;
	overflow: auto;
}
</style>
</head>
<body>
	<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">open</a>
	<div id="light" class="white_content">
		<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">close</a>
	</div>
	<div id="fade" class="black_overlay"></div>
</body>
</html>
分享到:
评论

相关推荐

    jquery 悬浮 导航栏

    jquery 悬浮 导航栏

    自适应网页右下角悬浮图标【带闪动】客服代码特效

    3.点击图标弹出层,显示客服电话号码,点击拨号自动拨号显示的电话号码;4.带关闭按钮 代码适用于手机网页客服电话显示特效,需要懂点网页前端知识整合使用,代码为网页特效代码,下载者应当遵守相关法律法规,遵守...

    js特效,各种页面弹出浮动

    页面内的超级酷浮动窗口.htm 仿frontpage可拖曳的对话窗口.htm 点击弹出窗口层,并且背景变暗渐变.htm 设定时间弹出窗口.htm ...表格或层往下慢慢展开的效果.htm ...五种网页弹出窗口实例代码.txt 提示框窗口自动居中.html

    原生Js浮动弹出层 可拖动 关闭 最小化.rar

    原生Js浮动弹出层 可拖动 关闭和最小化,用到了几个小图片,分别是标题栏、关闭按钮和最小化按钮,关闭和最小化我给误删了,自己再找个类似的图片覆盖掉吧,弹出层的其它部分都是完全正常的,兼容性也很好,具体效果...

    div+css鼠标悬停多方向显示微信二维码悬浮层代码.zip

    背景:学习前端知识,自己做页面 目的:学习前端知识 组网图:不涉及 工具:HBuilder X 简介:鼠标悬停实现显示与隐藏二维码效果; 鼠标悬停实现显示与隐藏二维码效果,实现的效果如下: 鼠标悬停在微信图标显示...

    css3实现的点击按钮弹出无刷新交互遮罩层特效源码.zip

    css3实现的点击按钮弹出无刷新交互遮罩层特效源码是一段实现了点击按钮后会直接弹出一个悬浮的无刷新交互遮罩层效果,在此遮罩层内会出现相关的内容及表单、按钮效果,功能非常强大且实用,本段代码适应于所有网页...

    右下角浮动广告层(js实现代码)

    这个是真的可以浮动的 有的网上源码在dramweaver里面可以浮动 但是丢到网页上就不行了 本代码就将该问题解决了

    css3实现的点击按钮弹出无刷新交互遮罩层特效特效代码

    css3实现的点击按钮弹出无刷新交互遮罩层特效源码是一段实现了点击按钮后会直接弹出一个悬浮的无刷新交互遮罩层效果,在此遮罩层内会出现相关的内容及表单、按钮效果,功能非常强大且实用,本段代码适应于所有网页...

    一个支持拖动和关闭的JS浮动窗口插件.rar

    一个支持拖动和关闭的JS浮动窗口插件,作者:Andyfoo,功能:Frame 做的小窗口。国内JS达人写的,封装的比较好,调用方便,内含示例,浅蓝色的JS自定义弹出窗口效果,带关闭,浮动窗口。

    WordPress主题全新柚子皮主题

    这是一款橙色两栏响应式收费wordpress博客主题,名字是柚子皮yzipi。...支持手机弹出菜单支持手机弹出搜索 支持点赞功能支持小工具随机文章功能 支持评论功能和二层评论嵌套 支持右侧图片悬浮广告位

    一些jQuery控件

    代码显示,弹出层,滚屏,时间控件,瀑布流,悬浮

    网页广告 代码全集 js 广告代码 大全 1-61 (A)

    53:关闭弹出两窗口的代码下载 54:鼠标经过即弹出广告代码下载 55:按钮跳出广告代码下载 56:左边底部悬浮代码下载 57:滑动展开/收缩广告代码下载 58:点空白页面也弹出代码下载 59:置顶收栏关闭效果代码下载 60:...

    网页广告 代码全集 js 广告代码 62-120 大全 (B)

    53:关闭弹出两窗口的代码下载 54:鼠标经过即弹出广告代码下载 55:按钮跳出广告代码下载 56:左边底部悬浮代码下载 57:滑动展开/收缩广告代码下载 58:点空白页面也弹出代码下载 59:置顶收栏关闭效果代码下载 60:...

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    9.18.htm 左键弹出式菜单效果的完整代码 9.19.htm 实现浮动菜单效果的完整代码 9.20.htm 实现树型导航菜单的完整代码 第10章(/C10/) ReturnText Ajax返回字符串数据 ReturnXML ...

Global site tag (gtag.js) - Google Analytics