jQuery:CSS阴影对话框_css对话框阴影-优快云博客

本文链接：https://blog.youkuaiyun.com/httpnet/article/details/5219034

本文介绍了一个基于jQuery的ShadowBox插件，该插件能够为网页元素添加阴影效果，并支持阴影宽度、透明度等自定义设置。通过简单的配置即可实现美观的阴影层布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

这里下载示例文件