https://clientes.cvip.es/assets/74549a87/js/alertBox.js

1/**
2 * 
3 * @authors JiangDing ([email protected])
4 * @date    2017-11-06 14:10:05
5 * @version 0.1
6 */
7
8;(function($, window, document){
9
10  var pluginName = "alertBox";
11  var defaults = {
12    zIndex: 99999,  
13    title: '',  
14    lTxt: '',   
15    lBgColor: "#D4D4D4", 
16    lFontColor: "#333", 
17    lCallback: function(){},
18    rTxt: '',   
19    rBgColor: "#ED6465",
20    rFontColor: "#fff", 
21    rCallback: function(){} 
22  };
23
24  function AlertBox(element, options){
25    this.element = element;
26    this.settings = $.extend({}, defaults, options);
27    this.init();
28  }
29
30  AlertBox.prototype = {
31    init: function(){
32      var that = this;
33      var element = this.element;
34        
35      that.render(element);
36      that.setStyle();
37      that.show();
38      that.trigger(element);
39    },
40
41    create: function(element){
42      var that = this,
43      $this = $(element),
44      title = that.settings.title,
45      zIndex = that.settings.zIndex,
46      lTxt = that.settings.lTxt,
47      rTxt = that.settings.rTxt,
48      alertHTML = [];
49
50      alertHTML[0] = '<div class="alert_panel"><span class="alert_title">' + title + '</span>';
51      alertHTML[1] = '<div class="alert_btn_group"><span class="alert_left_btn">'+ lTxt + '</span>';
52      alertHTML[2] = '<span class="alert_right_btn">' + rTxt + '</span></div>';
53      alertHTML[3] = '<div class="alert_close_btn"><p style="margin:0;">&#10005</p></div></div>';
54      alertHTML[4] = '<div id="alert_mask"></div>';
55      return alertHTML;
56    },
57
58    render: function(element){
59      var that = this,
60        $this = $(element),
61        alertHTML = that.create($this);
62      $('body').append('<div id="alert_box"></div>');
63
64      $('#alert_box').replaceWith(alertHTML[0] + alertHTML[1] + alertHTML[2] + alertHTML[3]);
65      $('body').append(alertHTML[4]);
66    },
67
68    show: function(){
69      setTimeout(function(){
70        $('.alert_panel').addClass('show');
71      },50)
72
73      $('#alert_mask').show();
74    },
75
76    hide: function(element){
77      var $this = $(element),
78        $alertBox = $('.alert_panel');
79      
80       $alertBox.remove();
81      setTimeout(function(){
82        $('#alert_mask').remove();
83      },150)
84    },
85
86    setStyle: function(){
87      var that = this;
88
89      $('.alert_panel').css({
90        'z-index': that.settings.zIndex
91      });
92
93        $('#alert_mask').css({
94        'height': $(window).height() + 'px',
95        'z-index': that.settings.zIndex - 1
96      });
97
98       $('.alert_left_btn').css({
99        'color': that.settings.lFontColor,
100        'backgroundColor': that.settings.lBgColor
101      })
102
103      $('.alert_right_btn').css({
104        'color': that.settings.rFontColor,
105        'backgroundColor': that.settings.rBgColor
106      })
107    },
108
109    trigger: function(element, event){
110      var that = this,
111        $this = $(element);
112
113       $('.alert_close_btn, .alert_left_btn, .alert_right_btn').on('click',function(){
114        that.hide();
115        $('.alert_panel').removeClass('show');
116        $('#alert_mask').remove();
117      });
118
119       if($.isFunction(that.settings.lCallback)){
120        $('.alert_left_btn').on('click',function(){
121          that.settings.lCallback();
122        });
123      }
124
125        if($.isFunction(that.settings.rCallback)){
126        $('.alert_right_btn').on('click',function(){
127          that.settings.rCallback();
128        });
129      }
130    }
131  };
132
133  $.fn[pluginName] = function(options) {
134    this.each(function() {
135      if (!$.data(this, "plugin_" + pluginName)) {
136        $.data(this, "plugin_" + pluginName, new AlertBox(this, options));     
137      }
138      new AlertBox(this, options);
139    });
140   return this;
141  };
142
143})(jQuery, window, document)