besoin d'aide overlay

Par RDZ, il y a 9 ans

Javascript

bonjour, je voudrais savoir si vous serait comment faire un overlay comme cette photo :

https://gyazo.com/0f190245ae9d410931eaa558544e7179

car je voudrais reproduire le meme merci d'avance a se qui me diront comment faire

5 réponses

RDZ, il y a 9 ans

merci pour ta reponse le probleme ses que j'ai essaye de faire le mien mais il ne veux pas se centrer voici un screen :

http://image.noelshack.com/fichiers/2016/24/1466170996-probleme.png

voici mon code js :

<script type="text/javascript"> $(document).ready(function () { $('#popups').click(function () { $('body').append('<div id="fade"></div>'); $('#fade').css({'filter': 'alpha(opacity=80)'}).fadeIn(); var Height = ($('.overlay').css('height') + 80) /2; var Width = ($('.overlay').css('width') + 80) / 2; $('#popup').css({ 'display': 'block', 'margin-top' : -Height, 'margin-left' : -Width }); }); $('#close').click(function () { $('#popup').css({ 'display': 'none' }); $('#fade').remove() }); }); </script>

mon code css :

<style type="text/css"> .overlay { display: none; background: #fff; padding: 20px; border: 20px solid #ddd; float: left; font-size: 1.2em; position: fixed; top: 50%; left: 50%; z-index: 99999; -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; box-shadow: 0px 0px 20px #000; /*--Coins arrondis en CSS3--*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; width: 400px; height: 500px; } .overlay .titre { z-index: 1001; } #fade { display: none; background: #000; position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: .80; z-index: 1000; } .overlay .content span { position: relative; margin-top: -39px; margin-right: -21px; float: right; width: 30px; height: 30px; background-color: red; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; z-index: 9999; } </style>
SLK, il y a 9 ans

Salut,

en fait quand tu mets

.overlay { ... left: 50%; ...

ça va déplacer la "bordure" gauche de l'overlay, pile à 50% de la largeur du parent.
Comme tu le vois sur ton screenshot, la bordure gauche est exactement à 50% (comme tu l'as demandé).
Bien sur, ce n'est pas ce qu'on voulait faire...
Une astuce serait de le déplacer de 50% moins "sa largeur divisée par 2".
Comme sa largeur est définie à 400px, on retirera 200px.

.overlay { ... left: calc(50% - 200px); ...

Du coup attention :
Si un jour tu changes la largeur de l'overlay, il faudra aussi penser à recalculer le "200px" qui sert à le centrer.
Si tu utilises un framework CSS, c'est le moment d'utiliser des variables.

AlexJM, il y a 9 ans

Ou alors d'utiliser les transformations css parce que lors d'une translation en pourcentage elles prennent en compte la larger de l'élément :

.overlay { left: 50%; transform: translateX(-50%); }

(n'oublie pas les préfixes)
Une vidéo de grafikart parle de centrer ses éléments, je t'inviteà y jeter un oeil ;)

RDZ, il y a 9 ans

dac merci je vais tester sa et je vous redi sa a fonctionner