首页>>Jquery文字>>jquery 弹出层 弹窗(2013-12-06)

jquery 弹出层 弹窗

 可以设置不同的背景和标题

jquery 弹出层 弹窗
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <button id="test">Alert</button>  
  2. <div id="testElement"> Hello how are you  
  3. <button>ElementButton</button>  
  4. </div>  
  5. <script src="includes/js/jquery.messagebox.js"></script>   
  6. <script>  
  7.             $('#test').messagebox({  
  8.                 title:'Title for freejs testing',   
  9.                 messageText: 'Hello freejs testing',  
  10.                 messageSubType: 'warning',  
  11.                 messageType : 'alert',  
  12.                 OkCallback: function() {  
  13.                     alert('You pressed OK');  
  14.                 },  
  15.                 onClose: function() {  
  16.                     alert('You closed the message box');  
  17.                 },  
  18.                 onCancel: function() {  
  19.                     alert('You pressed cancel');  
  20.                 }   
  21.             });  
  22.             $('#testElement').messagebox({  
  23.                 title:'Another Element',   
  24.                 messageText: 'Hello freejs testing',  
  25.                 messageType : 'confirm',  
  26.                 height: 100,  
  27.                 width: 400,  
  28.                 OkCallback: function() {  
  29.                     alert('You pressed OK');  
  30.                 },  
  31.                 onClose: function() {  
  32.                     alert('You closed the message box');  
  33.                 },  
  34.                 onCancel: function() {  
  35.                     alert('You pressed cancel');  
  36.                 }   
  37.             });  
  38.         </script>  

 

JavaScript Code
  1. /* 
  2.     Custom Message box plugin for jQuery (https://github.com/mpsiva89/jquery-messagebox) 
  3.     Copyright (c) 2013 SivaKumar and Jeyadevan 
  4.     Licensed under the MIT license (http://opensource.org/licenses/mit-license.html) 
  5.     Version: 1.0.3 
  6. */  
  7.   
  8. (function($, window, document, undefined) {  
  9.    
  10.     var html = '<div class="msgboxOverlay"><div class="alert-box msgwrapper"><div class="information"><div class="msgcontainer"><div class="msgheader"><a href="javascript:void(0);" class="msgclose">Close</a><span>Message Box Title</span></div><div class="msg">Text</div><div class="msgfooter"></div></div></div></div></div>';  
  11.       
  12.     var currentMessageBox;  
  13.       
  14.     var buttonOk = '<button type="button" class="buttonOK">Ok</button>';  
  15.     var buttonCancel = '<button type="button" class="buttonCancel">Cancel</button>';  
  16.       
  17.     var settings ;  
  18.       
  19.       
  20.     var pluginName = 'messagebox';  
  21.       
  22.     function MessageBoxPlugin(element, options) {  
  23.           
  24.         this.settings = settings;  
  25.           
  26.         this.element = element;  
  27.           
  28.         if (options) {  
  29.            this.options = options;  
  30.         }  
  31.           
  32.         var current = this;  
  33.           
  34.         $(this.element).click(function() {  
  35.             current.createMessageBox();  
  36.             $('body').prepend(currentMessageBox);  
  37.             current.intialize();  
  38.         });  
  39.           
  40.     }   
  41.       
  42.     MessageBoxPlugin.prototype.createMessageBox = function() {  
  43.         $.extend(this.settings, this.options);  
  44.         var temp = $(html);  
  45.         if(this.settings.messageElementId) {  
  46.             temp.find('.msg').html($(this.settings.messageElementId).html());  
  47.         } else {  
  48.             temp.find('.msg').html(this.settings.messageText);            
  49.         }  
  50.           
  51.         if(this.settings.height)  
  52.           temp.find('.msg').height(this.settings.height);  
  53.         if(this.settings.width)  
  54.           temp.find('.msgcontainer').width(this.settings.width);  
  55.         temp.find('.msgheader span').html(this.settings.title);  
  56.         temp.find('.information').removeClass('information').addClass(this.settings.messageSubType);  
  57.         var buttons = buttonOk;  
  58.         if(this.settings.messageType === 'confirm') {  
  59.             buttons = buttons + buttonCancel;  
  60.         }  
  61.           
  62.         temp.find('.msgfooter').html(buttons);  
  63.           
  64.         currentMessageBox = $('<div>').append(temp.clone()).html();  
  65.     }  
  66.       
  67.     MessageBoxPlugin.prototype.intialize = function() {  
  68.         var current = this;  
  69.         $.extend(current.settings, current.options);  
  70.           
  71.         $('.msgboxOverlay .msgclose').off("click");  
  72.         $('.msgboxOverlay .msgclose').on("click", function() {  
  73.             $('.msgboxOverlay').remove();  
  74.             if(current.settings.onClose) {  
  75.                 current.settings.onClose();  
  76.             }  
  77.         });  
  78.           
  79.   
  80.         $('.msgboxOverlay .buttonOK').off('click');  
  81.         $('.msgboxOverlay .buttonOK').on('click', function() {  
  82.             $('.msgboxOverlay').remove();  
  83.             if(current.settings.OkCallback) {  
  84.                 current.settings.OkCallback();  
  85.             }  
  86.         });  
  87.           
  88.         if(this.settings.messageType === 'confirm') {  
  89.             $('.msgboxOverlay .buttonCancel').off('click');  
  90.             $('.msgboxOverlay .buttonCancel').on('click', function() {  
  91.                 $('.msgboxOverlay').remove();  
  92.                 if(current.settings.onCancel) {  
  93.                     current.settings.onCancel();  
  94.                 }  
  95.             });  
  96.         }  
  97.               
  98.     }  
  99.       
  100.    
  101.     $.fn.messagebox = function(options) {  
  102.           
  103.         settings = {  
  104.             messageType: 'alert',  
  105.             messageSubType: 'information',  
  106.             title: 'Message',  
  107.             messageElementId: null,  
  108.             messageText: '',  
  109.             height: null,  
  110.             width: null,  
  111.             OkCallback : null,  
  112.             onClose: null,  
  113.             onCancel : null  
  114.         };  
  115.           
  116.         return this.each(function () {  
  117.             if (!$.data(this, 'plugin_' + pluginName)) {  
  118.                 $.data(this, 'plugin_' + pluginName,   
  119.                 new MessageBoxPlugin( this, options ));  
  120.             }  
  121.         });     
  122.           
  123.     };  
  124.    
  125. }(jQuery, window, document));  

 


原文地址:http://www.freejs.net/article_jquerywenzi_148.html