嫌弃浏览器自带弹出框，写个简单的jq自定义弹窗插件

标签：

最近做项目写个表单验证，提交信息验证有错误的时候，用了最懒的方法，直接把错误提示用alert()弹出框弹出来，于是老大看完后给了这个表情。。。

确实，自带弹窗样式丑不能自定义这些问题困扰着很多用户，而且在同浏览器有不同的表现，

有这样的：。。 有这样的：。。

还有这样的：。。 还有这样的:

相信做前端的都很熟悉这些面孔~ 不统一风格的弹窗直接拉低了整个网站的逼格。。

好，那就写个简单的JQ插件来装饰一下吧。

JQ插件标准的封装代码如下，首先需要闭包：

<script type="text/javascript">
(function ($) {
	//这里放入插件代码
})(jQuery);
</script>

这是jQuery官方的插件开发规范，这样写是作用是：
1. 避免全局依赖。
2. 避免第三方破坏。
3. 兼容jQuery操作符’$‘和’jQuery’

描述很官方对吧，网上很多资料可以找啦~ 其次是考虑插件开发的策略。

jQuery插件的开发包括两种：

一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法,也就是$.extend()。jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法，也就是$.fn.extend();

根据需求，这个插件应该是一个全局的函数，只要把要弹出的内容作为参数，就可以实现功能弹出,~所以选择前者

$.diy_alert = function(options) {
})(jQuery);

diy_alert是函数名，options是参数。那么接下来我们就要考虑有什么参数要写进去的了。

根据需求，我只需要一个框框把文字装起来，好看点就ok，再把这个东西整体居中，文字居中。那么熟悉css的人就知道这里涉及的参数有：

内边距，字体颜色，背景颜色，字体大小等，又需要再增加。还有最重要的参数：提示文字。

于是里面是这样写的：

var dft = {
paddingL: "80px",
paddingR: "80px",
paddingT: "50px",
paddingB: "50px",
fontSize:"32px",
bgColor: "#FFF",
fontColor: "#000",
cont: "成功"
};
var ops = $.extend(dft,options);

（PS：根据@橙子瓣 的评论，这样写比较严谨：var ops = $.extend(dft,options||{});  ）

dft是默认参数的集合，在$.extend()方法后，把有的参数传进来，没有的参数设为默认。

参数有了，接下来只需要生产一个div，把样式和内容丢进去，然后丢到body里显示就好了。

至于怎么居中，这里可以用绝对定位的50%定位，再来做边距的减法修正：

var box = $("<div>").css({ "padding-left": ops.paddingL, "padding-right": ops.paddingR, "padding-top": ops.paddingT, "padding-bottom": ops.paddingB, "border": "1px lightgrey solid","position":"fixed","left":"50%","top":"50%","background-color":"#fff","color":"#000","font-size":ops.fontSize,"z-index":101 }).html(ops.cont).appendTo($("body"));
box.css({"margin-left":-(box.outerWidth(true)/2),"margin-top":-box.outerHeight(true)/2});

可能有些人会对outerWidth(true)有点陌生。这个方法是获取包括padding,margin,和border在内的真实宽度。

弹窗生成出来了，最后在适当时候去掉就OK，懒人模式：

setTimeout(function(){
box.remove();
},2000);

有时间的同学自己写个关闭按钮上去。完整代码：

(function ($) {
        $.diy_alert = function(options) {
            var dft = {
                paddingL: "80px", 
                paddingR: "80px", 
                paddingT: "50px", 
                paddingB: "50px",
                fontSize:"32px",
                bgColor:    "#FFF",
                fontColor:    "#000",
                cont:    "成功"
            };
            var ops = $.extend(dft,options||{});
            var box = $("<div>").css({ "padding-left": ops.paddingL, "padding-right": ops.paddingR, "padding-top": ops.paddingT, "padding-bottom": ops.paddingB, "border": "1px #000 solid","position":"fixed","left":"50%","top":"50%","background-color":ops.bgColor,"color":ops.fontColor,"font-size":ops.fontSize,"z-index":101 }).html(ops.cont).appendTo($("body"));
            box.css({"margin-left":-(box.outerWidth(true)/2),"margin-top":-box.outerHeight(true)/2});
            setTimeout(function(){
                box.remove();
            },2000); 
        }
    })(jQuery);

记得在这之前引入jquery.js文件。最后就是使用了，超简单啦，只要给个参数就可以弹出来了：

$.diy_alert({"cont":"手机号格式不正确"});

最后弹出来是这个样子的：

两秒后自动消失，好看多了有木有- - 最起码在任何浏览器上都统一样式了，要漂亮的自己加参数调整~

就这样吧，写得不好勿喷，有问题请大侠指出，收工。

嫌弃浏览器自带弹出框，写个简单的jq自定义弹窗插件

标签：

原文地址：http://www.cnblogs.com/kazar/p/4451150.html