烈火网-遮蔽层效果
来源:互联网 发布:淘宝网品牌4头花架子 编辑:程序博客网 时间:2024/04/29 04:23
效果如上图:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>jquery 弹出层 - Liehuo.Net</title><script type="text/javascript" src="http://www.veryhuo.com/uploads/common/js/jquery-1.3.2.js"></script><style type="text/css">#dialog-overlay {width:100%; height:100%;filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; position:absolute; background:#000; top:0; left:0; z-index:3000; display:none;}#dialog-box {-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);-moz-border-radius: 5px; -webkit-border-radius: 5px;background:#eee;width:328px; position:absolute; z-index:5000; display:none;}#dialog-box .dialog-content {text-align:left; padding:10px; margin:13px;color:#666; font-family:arial;font-size:11px; }a.button {margin:10px auto 0 auto;text-align:center;background-color: #e33100;display: block;width:50px;padding: 5px 10px 6px;color: #fff;text-decoration: none;font-weight: bold;line-height: 1;-moz-border-radius: 5px;-webkit-border-radius: 5px;-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);text-shadow: 0 -1px 1px rgba(0,0,0,0.25);border-bottom: 1px solid rgba(0,0,0,0.25);position: relative;cursor: pointer;}a.button:hover {background-color: #c33100;}#dialog-box .dialog-content p {font-weight:700; margin:0;}#dialog-box .dialog-content ul {margin:10px 0 10px 20px; padding:0; height:50px;}</style><script type="text/javascript">$(document).ready(function () {$('a.btn-ok, #dialog-overlay, #dialog-box').click(function () {$('#dialog-overlay, #dialog-box').hide();return false;});$(window).resize(function () {if (!$('#dialog-box').is(':hidden')) popup();});});//Popup dialogfunction popup(message) {var maskHeight = $(document).height(); var maskWidth = $(window).width();var dialogTop = (maskHeight/3) - ($('#dialog-box').height()); var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2); $('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();$('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();$('#dialog-message').html(message);}</script></head><body onload="popup('烈火网提供计算机知识、网站运营、软件应用、设计教程、编程开发与IT资讯等内容,同时有源码下载、站长工具、在线手册、免费资源等内容,是国内快捷易懂、内容丰富的网上学习网站。')"><a href="javascript:popup('烈火网提供计算机知识、网站运营、软件应用、设计教程、编程开发与IT资讯等内容,同时有源码下载、站长工具、在线手册、免费资源等内容,是国内快捷易懂、内容丰富的网上学习网站。')">猛击此处,弹出层!</a><div id="dialog-overlay"></div><div id="dialog-box"><div class="dialog-content"><div id="dialog-message"></div><a href="#" class="button">关闭</a></div></div></body></html></div>
- 烈火网-遮蔽层效果
- 弹出DIV遮蔽层效果
- 背景变暗弹出层 遮蔽层效果
- 背景变暗弹出层 遮蔽层效果
- ext 添加遮蔽层
- js页面遮蔽层
- JavaScript遮蔽层
- 遮蔽层的实现
- 图片加遮蔽层
- jsp 遮蔽效果框
- css实现基本的鼠标滑过图片添加遮蔽层效果
- 遮蔽层 简单小例子
- jquery 弹出浮层(div) + 遮蔽层
- 生成一维条码和遮蔽层
- jquery 弹出浮层(div) + 遮蔽层 方法一
- 通过隐藏option实现select的联动效果 文章源自:烈火网,原文:http://www.veryhuo.com/a/view/10548.html
- DIV浮动层被OCX控件遮蔽解决方案
- 解决Ajax悬停效果,无法遮蔽FLASH的问题.
- Oracle导出导入dmp文件
- CentOS 查看系统是32位还是64位
- Twitter搜索现在快3倍啦
- c++虚函数的使用,借鉴一下
- 宏定义求结构体某个变量相对其偏移量的问题
- 烈火网-遮蔽层效果
- 漫谈postgresql的日志实现机制
- CSS选择器
- Oracle simple stream
- 操作系统练习题2
- IronPython应用之Selenium(Web测试,AutoPyTest自动化测试)
- 不使用任何额外变量,实现倒序字符串
- c++智能提示问题
- 2012-6-13 Android中的资源访问——尺寸资源