摘要：

　　kendo-ui中只是提供了windwo插件，并没有提供页内弹窗插件。现在分享项目中自己定制的基于window组件的弹窗插件，如果你的项目也是用的kendo-ui，只需要将组件代码引到项目中即可。

特点：

• 支持定时自动关闭弹窗
• 按钮自定义
• 支持最大化最小化

代码：

dialog.js

  1 var dialog = kendo.ui.Window.extend({
  2     // set options
  3     options: {
  4         name              : ‘GDialog‘,    // widget name
  5         onOk              : $.noop,
  6         okText            : ‘确定‘,
  7         cancelText        : ‘取消‘,
  8         defaultButtons    : ‘OK_CANCEL‘,  //‘OK‘ || ‘OK_CANCEL‘ || ‘CANCEL‘ || ‘NULL‘
  9         extraButtons      : [],           //[ { text:‘ok‘, className: ‘‘, click:function(){} }]
 10         appendTo  : ‘body‘,
 11         minWidth  : 400,
 12         minHeight : 100,
 13         resizable : false,
 14         actions   : [‘Close‘],            // [‘Minimize‘, ‘Maximize‘, ‘Close‘]
 15         autohide  : false,
 16         time      : 1000
 17     },
 18     // Init method
 19     init: function(element, options){
 20         var me = this;
 21         // Call super.init
 22         kendo.ui.Window.fn.init.call(this, element, options);
 23
 24         // Add buttons
 25         var $buttonsArea = this._addButtons(element, options);
 26
 27         // Set styles
 28         this.wrapper.addClass(‘k-dialog‘);
 29         $buttonsArea.addClass(‘k-button-area‘);
 30
 31         // Set the dialog‘s position by default
 32         if (!options || !options.position){ this.center(); }
 33
 34         // if the autohide is setted true that aftering a time auto hide the dialog. default is 1s.
 35         if(this.options.autohide) {
 36             setTimeout(function() {
 37                 kendo.ui.Window.fn.close.call(me);
 38             },this.options.time);
 39         }
 40     },
 41     open: function(){
 42         // Call super.open
 43         kendo.ui.Window.fn.open.call(this);
 44     },
 45     minimize: function(){
 46         // Call super.minimize
 47         kendo.ui.Window.fn.minimize.call(this);
 48
 49         $(this.buttonsArea).hide();
 50         this.wrapper.css(‘padding-bottom‘, ‘0‘);
 51     },
 52     restore: function(){
 53         // Call super.restore
 54         kendo.ui.Window.fn.restore.call(this);
 55
 56         $(this.buttonsArea).show();
 57         this.wrapper.css(‘padding-bottom‘, ‘51px‘);
 58     },
 59     center: function(){
 60
 61         if (this.options.isMaximized){ return this; }
 62
 63         // Call super.center
 64         kendo.ui.Window.fn.center.call(this);
 65
 66         var that           = this,
 67             position       = that.options.position,
 68             wrapper        = that.wrapper,
 69             documentWindow = $(window),
 70             scrollTop      = 0,
 71             newTop;
 72
 73         if (!that.options.pinned){ scrollTop = documentWindow.scrollTop(); }
 74
 75         newTop = scrollTop + Math.max(0,
 76                 (documentWindow.height() - wrapper.height() - 50 - parseInt(wrapper.css("paddingTop"), 10)) / 2);
 77
 78         wrapper.css({ top: newTop });
 79
 80         position.top = newTop;
 81
 82         return that;
 83     },
 84     _onDocumentResize: function(){
 85         if (!this.options.isMaximized){ return; }
 86
 87         // Call super._onDocumentResize
 88         kendo.ui.Window.fn._onDocumentResize.call(this);
 89
 90         this._fixWrapperHeight();
 91     },
 92     _fixWrapperHeight: function(){
 93         var height = (this.wrapper.height() - 51).toString() + ‘px‘;
 94         this.wrapper.css(‘height‘, height);
 95     },
 96     // Add buttons to the dialog
 97     _addButtons: function(element, options){
 98
 99         var that    = this,
100             buttons = this.options.extraButtons.slice(0);
101
102         var nullPattern    = /NULL/gi, okPattern = /OK/gi, cancelPattern = /CANCEL/gi,
103             defaultButtons = {
104                 buttonOk     : {text: that.options.okText,     className:‘ok-btn‘   , click:function(e){
105                     that.options.onOk.call(that, e);
106                     return false;
107                 }},
108                 buttonCancel : {text: that.options.cancelText, className:‘close-btn‘, click:function(e){
109                     e.preventDefault(); that.close();
110                 }}
111             };
112
113         // Append default buttons
114         if (!nullPattern.test(this.options.defaultButtons)){
115             okPattern.test(this.options.defaultButtons) &&
116                buttons.unshift(defaultButtons.buttonOk);
117             cancelPattern.test(this.options.defaultButtons) &&
118                buttons.unshift(defaultButtons.buttonCancel);
119         }
120
121         // Make button area
122         var buttonsArea  = document.createElement(‘div‘),
123             $buttonsArea = $(buttonsArea);
124         this.buttonsArea = buttonsArea;
125
126         // Make buttons and set buttons‘ attributes
127         for (var i = buttons.length - 1; i >= 0; --i){
128             var $aEl = $(document.createElement(‘a‘));
129             /*eslint no-script-url: 0*/
130             $aEl.html(buttons[i].text)
131                 .addClass(‘k-dialog-button‘)
132                 .addClass(buttons[i].className)
133                 .attr({href:‘javascript:;‘})
134                 .on(‘click‘, buttons[i].click)
135                 .kendoButton();
136             $buttonsArea.append($aEl);
137         }
138
139         this.wrapper.append($buttonsArea);
140
141         return $buttonsArea;
142     }
143 });
144
145 kendo.ui.plugin(dialog);

dialog.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 5     <link rel="stylesheet" type="text/css" href="kendo/styles/kendo.common.min.css" />
 6     <link rel="stylesheet" type="text/css" href="style/dialog.css" />
 7 </head>
 8 <body>
 9     <script type="text/javascript" charset="utf-8" src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
10     <script type="text/javascript" charset="utf-8" src="kendo/js/kendo.chopper.min.js"></script>
11     <script type="text/javascript" charset="utf-8" src="kendo/js/kendo.chopper.min.js"></script>
12     <script type="text/javascript" charset="utf-8" src="kendo/js/cultures/kendo.messages.zh-CN.js"></script>
13     <script type="text/javascript" charset="utf-8" src="kendo/js/cultures/kendo.culture.zh-CN.min.js"></script>
14     <div id="dialog"></div>
15     <script src="js/dialog.js"></script>
16     <script>
17         var dialog = $(‘#dialog‘).kendoGDialog({title:"弹窗"}).data(‘kendoGDialog‘);
18     </script>
19 </body>
20 </html>

附录：

属性：

方法：

注意：

工具栏的图片是我自己做的，制作了一个关闭按钮，刷新、最大化、最小化没有做。如果项目中引用了kendo-ui就不需要这个了。同一个弹窗不能多次创建，可以先销毁在创建。

下载代码