Boîte de superposition apparaissant au centre de l'écran

Question

J'ai un code JS qui fait passer l'arrière-plan à une couleur sombre et ouvre une fenêtre modale blanche, comme ceci :

function open_litebox(link) {
    var overlay_black = 'position:absolute;top:0%;left:0%;width:100%;height:100%;background:black;z-index:1001;opacity:0.5;';
    $('body').append('<div style="' + overlay_black + '"></div>');
    var overlay_white = 'position:absolute;top:25%;left:25%;padding:5px;background-color:white;z-index:1002;overflow:auto;';
    $('body').append('<div style="' + overlay_white + '"><p>heeeyyy</p></div>');
}

Mais le problème est qu'il n'apparaît pas au centre de l'écran. Je veux que la fenêtre modale soit positionnée au centre de l'écran, tant verticalement qu'horizontalement, mais je ne sais pas quelles seront la largeur et la hauteur du contenu de la fenêtre modale et je ne peux donc pas définir de valeurs fixes.

Toute aide est appréciée, merci.

Answer 1

Vous devez utiliser ces styles pour faire apparaître votre superposition blanche point mort :

var overlay_white = 'position:absolute;
                     top:50%;
                     left:50%;
                     background-color:white;
                     z-index:1002;
                     overflow:auto;
                     width:400px;
                     height:400px;
                     margin-left:-200px;
                     margin-top:-200px';

Alors position doit être spécifié. Le site top y left devrait être 50% . Le site margin-left y margin-top doivent être négatives et correspondre respectivement à la moitié de la largeur et de la hauteur de la boîte.

Answer 2

Je sais qu'il s'agit d'une vieille question, mais elle est apparue lorsque j'ai fait une recherche sur le sujet, et je voulais fournir une réponse actualisée.

En complément de la réponse de Sarfraz, il n'est pas nécessaire de spécifier explicitement la largeur et la hauteur. Si vous ne les connaissez pas (ou si vous ne voulez pas les définir), vous pouvez utiliser les éléments suivants dans votre style :

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

La ligne de transformation calcule la largeur et la hauteur pour vous.

Answer 3

Vous devriez être en mesure d'obtenir la largeur et la hauteur d'un élément après le chargement du contenu (essayez d'utiliser la commande jquery des aides pour cela - largeur() , hauteur() )

Une fois que vous avez les dimensions, le calcul peut se faire, puis vous pouvez positionner l'élément. Vous pouvez également masquer l'élément jusqu'à ce que le positionnement ait été effectué, afin que l'utilisateur ne voie pas les sauts.

Vous pouvez également utiliser un plugin comme boîte de fantaisie ce qui rend ce genre de choses très simples.