本例子实现弹窗的效果：如果亲感觉效果还不错，请继续往下阅读。
1、jquery.show.js
/*
* 开发者：lzugis
* 开发时间：2014年6月10日
* 实现功能：点击在鼠标位置显示div
* 版本序号：1.0
*/
(function($){
$.fn.showDIV = function(options){
var defaults = {};
var options = $.extend(defaults, options);
var showdiv=$(this);
var close, title, content;
close=$("
"); title=$(
在本文中，我们将深入探讨如何使用jQuery开发一个自定义插件来实现窗口（弹窗）效果。这个例子中，我们创建了一个名为`showDIV`的插件，它会在鼠标位置显示一个可定制的div，具备关闭功能。让我们一步步解析整个实现过程。
我们看到插件的核心代码位于`jquery.show.js`文件中。这是一个匿名函数，它接收jQuery对象作为参数，通过`$.fn.showDIV`扩展了jQuery的原型，从而使得所有jQuery选择器都能调用`showDIV`方法。下面是对代码的详细解释：
```javascript
// 初始化默认选项
var defaults = {};
// 合并用户传入的选项与默认选项
var options = $.extend(defaults, options);
// 获取被选元素
var showdiv=$(this);
// 初始化close, title, content变量
var close, title, content;
// 创建close按钮
close=$("");
// 创建标题
title=$("");
// 创建内容区域
content=$("");
// 将元素内容清空
showdiv.html("");
// 添加close按钮到div中
showdiv.append(close);
// 添加标题到div中
showdiv.append(title);
// 添加内容到div中
showdiv.append(content);
// 设置close按钮内容为 "X"
close.html("X");
// 设置标题内容
title.html(options.title);
// 设置内容
content.html(options.content);
// 显示div
showdiv.css("display","block");
// 设置div为绝对定位
showdiv.css("position","absolute");
// 计算div的水平和垂直居中位置
showdiv.css("left", ($(window).width()-options.width)/2+"px");
showdiv.css("top", ($(window).height()-options.height)/2+"px");
// 设置div的宽度和高度
showdiv.css("width",options.width);
showdiv.css("height",options.height);
// 绑定close按钮的点击事件，隐藏div
close.bind("click",function(){
showdiv.css("display","none");
});
```
这段代码创建了一个弹出窗口，并根据传入的选项调整其样式和内容。当用户点击关闭按钮时，窗口会消失。这里的关键在于`$.extend`函数用于合并用户自定义的选项和默认选项，以及使用CSS方法动态设置div的位置和大小。
接下来，我们有`jquery.showdiv.css`文件，它定义了窗口的样式。主要包含以下部分：
1. `body div`设置了基本字体大小和文字对齐方式。
2. `#container`定义了一个背景颜色、边框和尺寸的容器，用于演示目的。
3. `#showdiv`设置了窗口的基本样式，如背景颜色、初始隐藏状态、z-index以确保其在其他元素之上。
4. `.title`定义了标题的样式，包括内边距、背景色、文字样式等。
5. `.close`定义了关闭按钮的样式，包括位置、内边距、颜色等，当鼠标悬停时，按钮背景色变为灰色，鼠标指针变为手型，表示可以点击。
6. `.content`设置了内容区域的样式，如文字对齐方式和内边距。
`demo.html`展示了如何使用这个插件。通过引入jQuery库和我们的插件脚本，然后在文档加载完成后，将点击事件绑定到id为`show`的按钮上。当点击按钮时，调用`showDIV`方法并传递自定义参数，如窗口的宽高、标题和内容。
总结来说，这个jQuery自定义插件`showDIV`实现了一个简洁的弹窗功能，具有自定义标题、内容和关闭按钮。通过结合JavaScript和CSS，我们可以轻松地调整窗口的外观和交互，适应各种应用场景。这为我们提供了在网页中创建可复用、可配置的弹窗组件的一个良好范例。
