jQuery Girl
  1. jQuery Girl
  3. Positionner au centre de la zone visible
Intereting Posts
Publication d’un tableau d’objects JSON dans la méthode d’action MVC3 via jQuery ajax Regex pour permettre alphanumeric, -, _ et espace JQuery – Différencier entre ‘click’ et ‘focus’ sur la même entrée en utilisant les deux jQuery slider, Autoplay SWF lorsqu’il est placé sur SignalR client avec plusieurs connexions Empêcher la page de sauter en modifiant la position de l’élément sur la fonction de défilement Comment appendClass (‘ui-state-error’) à un stylé avec selectmenu, dropkick et / ou le plugin choisi? Collez un div avec Sticky-Kit et relâchez-le à un endroit précis dans AngularJS II. NetworkError: impossible d’exécuter ‘send’ sur ‘XMLHttpRequest’ jQuery Isotope filter to no items? HasClass doit-il précéder removeClass – jQuery vérifier si la valeur d’entrée n’est pas égale à l’entier alors ne soumettez pas le formulaire Jquery getJSON ne fonctionne pas sur plusieurs sites Comment pourrais-je sélectionner et transmettre plusieurs données dans le format donné dans js html? Webpack 2 chargement, exposition et regroupement de jQuery et bootstrap

Positionner au centre de la zone visible

Je suis en train de créer une fenêtre contextuelle de style lightbox pour une inscription à une liste de diffusion, mais je souhaite que cette dernière se positionne au centre de la page visible, et pas uniquement au centre de l’ensemble du document. si l’utilisateur fait défiler l’écran jusqu’en bas et clique pour s’inscrire, je souhaite qu’il apparaisse au centre de l’écran.

Je suppose que jQuery / JS sera la meilleure solution pour cela; voici mon code CSS actuel qui fonctionne assez bien, mais la div doit être enfoncée dynamicment dans l’espace visible pour les écrans plus petits. 

.my-div{ width:960px; height:540px; position:absolute; top:50%; left:50%; margin-left:-480px; margin-top:-270px; z-index:60; display:none; }

Tu étais proche! Cela peut être fait avec CSS seul:

Use position: fixed au lieu de position: absolute .

Fixé fait référence à la fenêtre d’affichage, tandis qu’absolu fait référence au document. Lire tout de qui le concerne! 

 var w = $(window).width(); var h = $(window).height(); var d = document.getElementById('my-div'); var divW = $(d).width(); var divH = $(d).height(); d.style.position="absolute"; d.style.top = (h/2)-(divH/2)+"px"; d.style.left = (w/2)-(divW/2)+"px";

Je sais que cela ne résoudra pas la question, mais c’est une bonne référence et un bon sharepoint départ: comment positionner un div au centre de la fenêtre du navigateur

Position Div exactement au centre de l’écran

JSFiddle ici et ici

avec jQuery: 

 var left = ($(window).width() - $(.my-div).width()) / 2; var top = ($(window).height() - $(.my-div).height()) / 2; $('.my-div').position({top: top + 'px', left: left + 'px});

Bien que la réponse acceptée soit la meilleure, si vous ne pouvez pas régler la divs position sur fixed , vous pouvez utiliser cette solution JavaScript pure. 

 var myElement = document.getElementById('my-div'), pageWidth = window.innerWidth, pageHeight = window.innerHeight, myElementWidth = myElement.offsetWidth, myElementHeight = myElement.offsetHeight; myElement.style.top = (pageHeight / 2) - (myElementHeight / 2) + "px"; myElement.style.left = (pageWidth / 2) - (myElementWidth / 2) + "px";

JSFiddle

Ou une version plus condensée: 

 var w = window, elem = document.getElementById('my-div'); elem.style.top = (w.innerHeight/2) - (elem.offsetHeight/2) + 'px'; elem.style.left = (w.innerWidth/2) - (elem.offsetWidth/2) + 'px';

Cette réponse est une version JavaScript vanille de la réponse de Lahiru Ashan .