Centrer un div qui apparait suite appel Jquery

Eléphant du PHP | 183 Messages

19 avr. 2014, 09:55

Bonjour,
J'essai de centrer un div (qui est responsive) qui apparait lors d'un clic en Jquery
Dont la fonction est :
[javascript]jQuery(".signup_btn").click(function(e){
e.preventDefault();
$('#signUp').slideDown();
$('#mask').css('display', 'block');
});[/javascript]

Cela marche parfaitement.

Cependant j'ai un souci c'est que le div apparait dans le haut de l'écran. Je souhaiterai qu'il apparaisse au milieu de l'écran (En verticla et horyzontal) quelque soit la position du scroll afin qu'il soit bien visible, car quand je clic actuellement (avec mon scroll au milieu de page, le div apparait mais il est en haut et je suis obliger de scroller vers le haut pour le voir...

A priori c'est cette fonction ci : mais je comprend pas comment adaptée :

[javascript]jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
$(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
$(window).scrollLeft()) + "px");
return this;
}[/javascript]

Pouvez vous m'aider ?

Merci
_________
Fabien

Eléphant du PHP | 58 Messages

20 avr. 2014, 10:51

A priori,
[javascript]
jQuery(".signup_btn").click(function(e){
e.preventDefault();
$('#signUp').slideDown();
$('#mask').css('display', 'block');

$('#mask').css("position","absolute");
$('#mask').css("top", Math.max(0, (($(window).height() - $('#mask').outerHeight()) / 2) +
$(window).scrollTop()) + "px");
$('#mask').css("left", Math.max(0, (($(window).width() - $('#mask').outerWidth()) / 2) +
$(window).scrollLeft()) + "px");

});
[/javascript]

Eléphant du PHP | 58 Messages

20 avr. 2014, 10:52

D'ailleurs,
[javascript]jQuery(".signup_btn").click(function(e){
e.preventDefault();
$('#signUp').slideDown();

$('#mask').css("position","absolute");
$('#mask').css("top", Math.max(0, (($(window).height() - $('#mask').outerHeight()) / 2) +
$(window).scrollTop()) + "px");
$('#mask').css("left", Math.max(0, (($(window).width() - $('#mask').outerWidth()) / 2) +
$(window).scrollLeft()) + "px");
$('#mask').css('display', 'block');
});[/javascript]
devrait être mieux, on affiche la div une fois positionnée :D