Archive

Articles taggués ‘jquery’

Créer une modal window avec jquery

24/03/2009
$(document).ready(function() {
    jQuery.fn.centerScreen = function(loaded) {
	var obj = this;

	if (!loaded) {
	    obj.css('top', $(window).height() / 2 - this.height() / 2);
	    obj.css('left', $(window).width() / 2 - this.width() / 2);
	    $(window).resize(function() {
		obj.centerScreen(!loaded);
	    });
	} else {
	    obj.stop();
	    obj.animate({
		top: $(window).height() / 2 - this.height() / 2,
		left: $(window).width() / 2 - this.width() / 2}, 200, 'linear');
	}
    }
    jQuery.fn.fillScreen = function(loaded) {
	var obj = this;

	if (!loaded) {
	    obj.css('top', 0);
	    obj.css('left', 0);
	    obj.css('width', $(window).width());
	    obj.css('height', $(window).height());
	    $(window).resize(function() {
		obj.fillScreen(!loaded);
	    });
	} else {
	    obj.stop();
	    obj.animate({width: $(window).width(), height: $(window).height()}, 200, 'linear');
	}
    }
    jQuery.fn.showModal = function() {
	var mask = $('<div id="modalMask"/>').css({
	    backgroundColor:'gray',
	    position:'fixed',
	    display:'none',
	    zIndex:99
	});
	mask.appendTo(document.body);
	mask.fillScreen();
	mask.fadeIn(1000);
	this.css({position:'fixed',zIndex: 100});
	this.appendTo(document.body);
	this.show();
	this.centerScreen();

	$(document).bind("keydown", this, function(event) {
	    if (event.which == 27) {
		event.data.closeModal();
	    }
	});
    }
    jQuery.fn.closeModal = function() {
	var obj = this;
	this.fadeOut(300, function() {
	    $(obj).remove();
	});
	$('#modalMask').fadeOut(300, function() {
	    $('#modalMask').remove();
	});
    }
});

function testModal() {
    var uiDialog = $('<div/>').css({
	border:'2px solid black',
	background:'white',
	width:350,
	height:350,
	padding:5
    });

    uiDialog.showModal();
    return true;
}

Javascript ,