jQuery:CSS阴影对话框

来源：互联网发布：索尼z5更新7.0挂起网络编辑：程序博客网时间：2024/04/29 04:17

jQuery插件: jquery.widget.shadowbox.js

/** * 一个简单的设置DIV阴影的插件 * * 功能: * 1. 根据阴影宽度自动调整外层容器宽度,以及透明度 * 2. 可定义ShadowBox的宽度和高度 * 3. 可用CSS样式表定义可视化样式 * * @author joe.he <developerworks@163.com> * @copyright irgs.cn */(function(jQuery) {jQuery.fn.shadowbox = function(settings) {var self = this;// 默认设置var defaults = {shodowWidth: 20,css: {outer: 'widget-shadowbox-outer',shadow: 'widget-shadowbox-shadow',}};if (settings)jQuery.extend(defaults, settings);// 设置阴影层的CSS样式var shadow = jQuery("<div>").addClass(defaults.css.shadow)// 关联一个CSS样式规则,可以自定义阴影样式.width(self.width()).height(self.height()).css({marginTop:defaults.shodowWidth+"px", marginLeft:defaults.shodowWidth+"px",zIndex:-100,position: "absolute"});var outer = jQuery("<div>").addClass(defaults.css.outer).width(self.outerWidth()+defaults.shodowWidth).height(self.outerHeight()+defaults.shodowWidth).css({position: "absolute",zIndex:999});this.prepend(shadow).wrap(outer.get());// 返回jQuery对象用户链式调用return this;};})(jQuery);

HTML页面: jquery.widget.shadowbox.html

<?xml version="1.0" encoding="UTF-8" ?><!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" /><mce:script type="text/javascript" src="jquery.js" mce_src="jquery.js"></mce:script><mce:script type="text/javascript" src="jquery.widgets.shadowbox.js" mce_src="jquery.widgets.shadowbox.js"></mce:script><title>CSS 阴影层</title><link type="text/css" rel="stylesheet" href="jquery.widget.shadowbox.css" mce_href="jquery.widget.shadowbox.css" /></head><body><div class="operations"> <a href="javascript:void(0);" mce_href="javascript:void(0);" id="toggleDialog">显示对话框</a></div><div class="content"><div class="titlebar">标题文字</div><p>jQuery Shadow Box 插件示例</p><pre> 功能: 1. 根据阴影宽度自动调整外层容器宽度,以及透明度 2. 可定义ShadowBox的宽度和高度 3. 可用CSS样式表定义可视化样式 1) widget-shadowbox-outer: 外层容器 2) widget-shadowbox-shadow: 阴影样式 jQuery(document).ready(function() { jQuery("div.content").shadowbox({ shodowWidth: 5, shadowopacity: 0.2 }); }); </pre><div class="bottombar"> <input type="submit" value="确定"> <input type="button" value="取消""></div></div><mce:script type="text/javascript"></mce:script></body></html>

CSS 样式表:

@CHARSET "UTF-8";body { font-family: Verdana; font-size: 12px;}pre { font-family: Verdana; font-size: 12px;}p { text-indent: 2em;}pre { margin-left: 2em; line-height: 150%;}/*容器层*/.widget-shadowbox-outer { position: absolute;}/*阴影层*/.widget-shadowbox-outer .widget-shadowbox-shadow { background: #87A34D; opacity: 0.3;}/*内容层*/.content { /*定义内容层的背景色,覆盖阴影DIV的背景色*/ border: 1px solid #628D0B; width: 500px; height: 400px; background: #fff; margin: 10px;}.content .titlebar { font-weight: bold; padding: .7em 1em; color: white; background: #87A34D; vertical-align: middle; font-size: 12px;}.content .bottombar { font-weight: bold; padding: .5em 1em; color: black; background: #DCEAC0; text-align: right; color: black;}.content .bottombar input { margin-left: 5px;}.hide {display: none;}

这里下载示例文件