2012-03-08 67 views
1

我正在尋找jQuery的mootools的插件blockUI功能。你知道一些插件或簡單的方法來阻止瀏覽器在特定時間由mootools?Mootools jquery的blockUI等效

+0

阻止什麼? UI線程?模態屏幕?你有沒有嘗試過Mootools鍛造?你有沒有看過mootools-more? – 2012-03-08 22:21:47

+0

我需要20秒,用戶瀏覽器的塊,用倒計時的信息請稍候,這樣的事情: '的setTimeout(函數(){$ .unblockUI({ onUnblock:函數(){$ 阿賈克斯({ url:'x4-wynik-walki.php', [...] }); } }) },10000);' ' – brushek 2012-03-08 22:56:40

+0

我想,我剛剛找到了我需要的:David Walsh的overlay插件。現在我需要弄清楚如何在倒計時的方塊上覆蓋一個盒子,並設置超時時間爲20秒。感謝您的建議。 – brushek 2012-03-08 23:17:46

回答

1

這裏有一些代碼讓你開始。 http://jsfiddle.net/5BCPS/

取出來我在這裏的插件:https://github.com/DimitarChristoff/Modal/blob/master/Source/js/Modal.js

(function() { 

this.Modal = {}; 

Element.implement({ 
    diffuse: function(position){ 
     return this.setStyles({ 
      position: position || 'absolute', 
      top: 0, 
      bottom: 0, 
      left: 0, 
      right: 0, 
      height: '100%', 
      width: '100%' 
     }); 
    } 
}); 

Modal.Overlay = new Class({ 

    Implements: [Events, Options], 

    options: { 
     zIndex: 900000, 
     opacity: .3, 
     backgroundColor: '#555', 
     fx: { 
      duration: 300 
     } 
    }, 

    initialize: function(container, options){ 
     this.setOptions(options); 
     this.container = document.id(container); 
     var self = this; 
     this.element = new Element('div', { 
      'class': 'overlay', 
      styles: { 
       display: 'none', 
       opacity: 0, 
       zIndex: this.options.zIndex, 
       backgroundColor: this.options.backgroundColor 
      }, 
      events: { 
       click: function() { 
        self.fireEvent("overlayClick"); 
       } 
      }, 
      tween: this.options.fx 
     }).diffuse('fixed').inject(this.container); 
     return this; 
    }, 

    show: function(){ 
     this.element.setStyle("display", "block").fade(this.options.opacity); 
     return this.fireEvent("show"); 
    }, 

    hide: function(){ 
     this.element.fade(this.options.opacity).get("tween").chain(function() { 
      this.element.setStyle("display", "none"); 
     }); 
     return this.fireEvent("hide"); 
    } 

}); 

})(); 

var modal = new Modal.Overlay(document.body, { 
    hideAfter: 5, 
    onHide: function() { 
     // do something. 
    } 
}).show(); 


modal.hide.delay(3000, modal); 

所有你需要的是你顯示在頂部/計數器的內容。那只是簡單的js。

+0

謝謝!我不知道爲什麼我沒有使用你的插件...我多次看到他......測試和使用的時間。 – brushek 2012-03-08 23:35:28