[英]Mootools jquery's blockUI equivalent
我正在搜索mootools的jquery插件blockUI功能。 您是否知道通過mootools在給定時間內阻止瀏覽器的某些插件或簡單方法?
這是一些入門的代碼。 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。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.