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; }