• 嫌弃浏览器自带弹出框,写个简单的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":"手机号格式不正确"});

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

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

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

  • 相关阅读:
    全民医疗
    SpringMVC
    Mybatis 缓存策略
    不要追涨杀跌
    我只认比特币
    ETH反思
    世界是熵增的
    切片最好还是传引用
    rxgo示例
    11月份的计划
  • 原文地址:https://www.cnblogs.com/kazar/p/4451150.html
Copyright © 2020-2023  润新知