Modal widget
Modal widget
I am not sure I should post that kind of stuff here or in the jQuery
UI group, please let me know if it's wrong.
That's a pretty simple modal function made with the widget factory:
JavaScript:
$.widget("ui.modal", {
_init: function(){
var o = this.options;
this.modalDiv = $("<div/>")
.addClass(o.modalClass)
.css({
zIndex: o.zIndex,
opacity: 0.6
})
.appendTo(this.element);
if ( o.msg ){
this.msgDiv = $("<div/>")
.addClass(o.msgClass)
.css({
zIndex: o.zIndex+1
})
.html(o.msg)
.appendTo(this.element);
}
this.resize();
},
resize: function(){
var o = this.options;
/* if the selector is the body and is half empty,
the modal would take only the size of the part of the page with
content,
so we take the size of the window */
if ( this.element.get(0) === document.body && this.element.height < $
(window).height() ){
var contW = $(window).width();
var contH = $(window).height();
}
else{
var contW = $(this.element).width();
var contH = $(this.element).height();
}
this.modalDiv
.width(contW)
.height(contH);
if ( this.msgDiv ){
var msgW = this.msgDiv.outerWidth();
var msgH = this.msgDiv.outerHeight();
if ( msgW > contW || msgH > contH ){
this.msgDiv.hide();
}
else{
this.msgDiv
.show()
.css({
left: Math.floor((contW-msgW)/2),
top: Math.floor((contH-msgH)/2)
});
}
}
},
destroy: function(){
var o = this.options;
if ( this.msgDiv ){
this.msgDiv.fadeOut("fast",function(){
$(this).prev("."+o.modalClass).fadeOut("fast",function(){
$(this).remove();
});
$(this).remove();
})
}
else{
this.modalDiv.fadeOut("fast",function(){
$(this).remove();
})
}
}
});
$.extend($.ui.modal, {
version: "1.7.2",
defaults: {
modalClass: "ivts_modal",
msg: false,
msgClass: "ivts_modal_msg",
zIndex: 1
}
});
$(window).resize(function(){
$(".ivts_modal").each( function(){
$(this).parent().modal("resize");
});
});
CSS:
.ivts_modal{
position: absolute;
left: 0;
top: 0;
background-color: #000;
}
.ivts_modal_msg{
position: absolute;
overflow: auto;
text-align: center;
border: 2px #000 solid;
background-color: #FFF;
color: #000;
padding: 10px
}