JQ封装简易弹框插件

使用JQ封装简易弹框插件

自己瞎写，用jq写了一个弹框插件。代码不规范，写法上也有诸多问题，望不吝赐教

首先对jquery扩展一个myplug方法：

; (function ($) {
  $.fn.myPlug = function (opt) {

  }

})(jQuery);

设置插件的默认属性：

var defOpt = {   // 默认参数
    bg: 'white', // 背景颜色
    title: '标题',
    content: '内容',
    vanish: false  // 点击空白处是否消失
  }

如果用户设置了自定义属性，则覆盖它的默认属性，有两种写法，如下：

$.fn.myPlug = function (opt) {
    opt = opt || {}
    // 用自定义属性覆盖默认属性
    // 写法1：
    // for (var d in defOpt) {
    //   if (opt.hasOwnProperty(d))
    //     continue
    //   opt[d] = defOpt[d];
    // }

    // 写法2：
    opts = $.extend({}, defOpt, opt);  // 用自定义属性覆盖默认属性
  }

myPlug插件里面可以有多个方法，为了收集这些方法，可以新建一个对象来保存：

  function AlertObj(elm, opt) {  // elm：元素  opt：配置
    this.options = opt
    this.$elm = $(elm)
  }
  var that = new AlertObj(this, opts)

开始往AlertObj里面添加方法，我只写了一个show()方法，把弹框出现和消失全写在里面：

show: function () {
      var o = this.options
      var dom = '<div class="alert"><div class="alert-in"><div class="alert-close" id="close">×</div><div class="alert-title">' + o.title + '</div><div class="alert-content">' + o.content + '</div></div></div>'
      $('body').append(dom)

      // 弹框样式
      var w = $(window).width()
      var h = $(window).height()
      $('.alert').css({
        width: w + 'px',
        height: h + 'px',
        background: 'rgba(0,0,0,0.5)',
        'padding-top': '20%',
        'box-sizing': 'border-box',
        position: 'absolute',
        top: 0,
        left: 0,
        'z-index': 1000
      })
      $('.alert-close').css({
        'position': 'absolute',
        'top': '-10px',
        'right': '-10px',
        'width': '30px',
        'height': '30px',
        'border-radius': '50%',
        'font-size': '25px',
        'text-align': 'center',
        'line-height': '30px',
        'border': '1px solid #333',
        'background': 'white'
      })
      $('.alert-in').css({
        'border': '1px solid #333',
        'border-radius': '5px',
        'margin-left': '30%',
        "background": 'white',
        'width': '40%',
        'position': 'relative',
      })
      $('.alert-title').css({
        'font-size': '17px',
        'border-bottom': '1px dotted #666',
        'padding': '10px',
        title: '标题'
      })
      $('.alert-content').css({
        'padding': '20px',
        title: '标题'
      })
      $('.alert').css({
        display: 'block'
      })
      $('#close').click(function () {
        $('.alert').remove()
      })
      // 点击空白黑色区域清除弹框
      $(document).click(function (e) {
        if (($(e.target).attr('class') == 'alert')) {
          if (o.vanish) {
            $('.alert').remove()
          }
        }
      })
    }

在html里面：

$('button').click(function () {
      $('#test').myPlug({
        title: 'hah',
        content: 'hah',
        vanish: true
      })
    })

<button id="test">alert</button>

完整代码如下：

; (function ($) {
  var defOpt = {   // 默认参数
    bg: 'white', // 背景颜色
    title: '标题',
    content: '内容',
    vanish: false  // 点击空白处是否消失
  }
  $.fn.myPlug = function (opt) {
    opt = opt || {}
    // 用自定义属性覆盖默认属性
    // 写法1：
    // for (var d in defOpt) {
    //   if (opt.hasOwnProperty(d))
    //     continue
    //   opt[d] = defOpt[d];
    // }

    // 写法2：
    opts = $.extend({}, defOpt, opt);  // 用自定义属性覆盖默认属性

    var that = new AlertObj(this, opts)
    that.show()
  }

  function AlertObj(elm, opt) {  // elm：元素  opt：配置
    this.options = opt
    this.$elm = $(elm)
  }

  AlertObj.prototype = {
    show: function () {
      var o = this.options
      var dom = '<div class="alert"><div class="alert-in"><div class="alert-close" id="close">×</div><div class="alert-title">' + o.title + '</div><div class="alert-content">' + o.content + '</div></div></div>'
      $('body').append(dom)

      // 弹框样式
      var w = $(window).width()
      var h = $(window).height()
      $('.alert').css({
        width: w + 'px',
        height: h + 'px',
        background: 'rgba(0,0,0,0.5)',
        'padding-top': '20%',
        'box-sizing': 'border-box',
        position: 'absolute',
        top: 0,
        left: 0,
        'z-index': 1000
      })
      $('.alert-close').css({
        'position': 'absolute',
        'top': '-10px',
        'right': '-10px',
        'width': '30px',
        'height': '30px',
        'border-radius': '50%',
        'font-size': '25px',
        'text-align': 'center',
        'line-height': '30px',
        'border': '1px solid #333',
        'background': 'white'
      })
      $('.alert-in').css({
        'border': '1px solid #333',
        'border-radius': '5px',
        'margin-left': '30%',
        "background": 'white',
        'width': '40%',
        'position': 'relative',
      })
      $('.alert-title').css({
        'font-size': '17px',
        'border-bottom': '1px dotted #666',
        'padding': '10px',
        title: '标题'
      })
      $('.alert-content').css({
        'padding': '20px',
        title: '标题'
      })
      $('.alert').css({
        display: 'block'
      })
      $('#close').click(function () {
        $('.alert').remove()
      })
      // 点击空白黑色区域清除弹框
      $(document).click(function (e) {
        if (($(e.target).attr('class') == 'alert')) {
          if (o.vanish) {
            $('.alert').remove()
          }
        }
      })
    }
  }
})(jQuery);

效果如图：