6
votes

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

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

mais le problème est, il n'apparaît pas du centre mort dans l'écran. Je veux que la fenêtre modale soit positionnée dans le centre mort à la fois verticalement et horizontalement, mais je ne sais pas quelle est la largeur / la hauteur du contenu à l'intérieur de la fenêtre modale, je ne peux donc pas définir des valeurs fixes.

Toute aide est appréciée, acclamations.


0 commentaires

3 Réponses :


2
votes

Vous devriez pouvoir obtenir la largeur et la hauteur d'un élément après chargement du contenu (essayez d'utiliser aidateurs jQuery Pour cela - largeur () , hauteur () )

Une fois que vous avez les dimensions, le calcul peut se produire, puis positionner l'élément. Vous pouvez également garder l'élément masqué jusqu'à ce que le positionnement soit effectué afin que l'utilisateur ne voie pas la sauvegarde.

Vous pouvez également utiliser un plugin comme Fancybox qui fait des choses comme ça vraiment simple.


0 commentaires

20
votes

Vous devez utiliser ces styles pour que votre superposition blanche apparaisse morte-centre : xxx

donc " / code> devrait être spécifié. Le haut et gauche doit être 50% . Le margin-gauche et Margin-top doit être négatif une moitié de la largeur et de la hauteur de la boîte respectivement.


1 commentaires

SET POSITION TO FIXE Si vous souhaitez que la case se déplace lors du défilement.



6
votes

Je sais que c'est une vieille question, mais elle est venue pendant que je googling the thème, et je voulais fournir une réponse mise à jour.

En développant la réponse de Sarfraz, vous n'avez pas besoin de spécifier explicitement la largeur et la hauteur. . Si celles-ci sont inconnues (ou si vous ne voulez pas les définir), vous pouvez utiliser ce qui suit dans votre style: xxx

la ligne de transformation indique la largeur et la hauteur pour vous .


0 commentaires