前言：
之所以写下这篇文章，是想将我的想法分享给大家；对于初学者，我希望他能从这篇文章中获取对他有用的东西，对于经验丰富的开发者，我希望他能指出我的不足，给我更多的意见和建议；目的就是共同进步。
[b]一.要做什么插件？[/b]
我想要实现一个插件可以取代浏览器默认的弹出对话框或窗体，就是我们通过调用window.alert，window.confirm，window.prompt这些方法 所弹出的网页对话框，通过调用window.open，window.showModalDialog，window.showModelessDialog 所弹出的窗体。
之所以这样做是因为：浏览器默认的对话框功能简单，不能满足更多需要；用户体验差。现代浏览器很多都会默认阻止弹出窗体（可能是因为在以前弹出广告太猖獗的原因吧，还记得03,40年那阵，看个XX网站弹了一堆窗口，关都关不过来，浏览器都弄死了，甚至电脑都当机了。）。
[b]二.想要的效果是什么？
[/b] 关于对话框插件，我们都知道在不同的浏览器里显示样式是有一些分别的，但基本上布局结构都一样。我们的插件想要的效果是：在任何浏览器里显示的样式和布局结构都保持一致，位于浏览器正中央（这样用户能够第一时间看到）。
弹出窗体在实现上与对话框类似（我是指我们要开发的插件，并非是说浏览器默认的实现）。
[b]三.设计一下功能[/b]
我们看着图片一步步来说：
[img]http://files.jb51.net/upload/201204/20120426003517963.gif[/img]
1、遮挡页面内容（图片上灰色半透明部分），透明度可以设置（不透明0-1完全透明），这样的好处是 在用户关闭对话框之前不能对页面进行操作。
2、对话框居中显示，对话框大小可以设置（长宽）。
3、图中(1)和(2)为对话框图标，都可以设置。
4、对话框标题可以内容都可以设置。
5、可以不显示关闭按钮(x)。
6、底部按钮可以为0个或多个，并且可以为其设置回调函数。
[b]四.如何实现功能？[/b]
1.使用CSS样式控制外观。
*为了避免CSS命名冲突，我们需要为插件确定一个名字空间，其下所有样式都在该命名空间下。
2.遮挡所有内容
*我们在CSS里设置基本样式。
[url=javascript:;]_button.fn(me);
}).appendTo(_buttons_);
})
}
_container_.css({ height: _containerHeight_ });
this.close = function () {
me.remove();
}
this.setContent = function (content) {
_content_.html(content);
}
return this;
}
//设置默认参数
$.alert.defaults = {
title: '信息提示', //对话框标题
content: null, //对话框内容
width: 200, //宽
height: 100, //高
opacity: 0.5, //透明度
icon: null, //显示在标题前面的小图标
iconBig: null, //显示在内容左侧的大图标
buttons: null, //按钮集合[{text:'按钮显示文字',fn:回调函数(event)}],event = {}
close: true//是否显示关闭按钮
}
})(jQuery);
调用
$.alert({
title: '火星向你发出警告', //对话框标题
content: '我们是火星人，我们就要入侵地球了，你们准备好了吗？', //对话框内容
width: 300, //宽
height: 150, //高
opacity: 0.5, //透明度
icon: 'icon.png', //显示在标题前面的小图标
iconBig: 'icon-big.png', //显示在内容左侧的大图标
buttons: [{ text: '好怕怕', fn: function () { $.alert('我好怕怕呀')} }], //按钮集合[{text:'按钮显示文字',fn:回调函数(event)}],event = {}
close: true//是否显示关闭按钮
});
[b]七.下载[/b]
下面是我测试和使用的例子，感兴趣的朋友可以自己下载修改。
[url=http://xiazai.jb51.net/201204/yuanma/jQuery.alert.rar]点击这里下载[/url]
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
