réglage de la position de la fenêtre pop up basée à la page position de défilement et la fermeture en cliquant sur.

Question

Je sais qu'il ya beaucoup d'aliments sur ces questions et j'ai été par la plupart d'entre eux mais je ne peux pas le faire fonctionner. Je suis vraiment perdu avec .js.

Je suis en utilisant des fenêtres pop très simples qui offrent un plus contenu sur un sujet par cicking sur le titre du sujet. J'utilise un simple code css:

.black_overlay { 
    display: none; 
    position: absolute; 
    top: 0%; 
    left: 0%; 
    width: 100%; 
    height: 100%; 
    background-color: black; 
    z-index: 1001; 
    -moz-opacity: 0.8; 
    opacity: .80; 
    filter: alpha(opacity=80); 
} 
.white_content { 
    display: none; 
    position: absolute; 
    left: 20%; 
    top:25%; 
    width: 70%; 
    height: auto; 
    padding: 10px; 
    border: 6px solid #ed7d86; 
    background-color: white; 
    text-align: center; 
    z-index: 1002; 
    overflow: auto; 
} 

Et html:

<div class="flex-item"> 
    <a href="javascript:void(0)" onclick="document.getElementById('TITLE').style.display='block'; 
document.getElementById('fade').style.display='block'">TITLE</a> 
    <div id="TITLE" class="white_content">Something else about TITLE. 
<a href="javascript:void(0)" onclick="document.getElementById('TITLE').style.display='none'; 
document.getElementById('fade').style.display='none'">Close</a></div> 
</div> 

Ce code fonctionne très bien jusqu'à ce que je l'essayer sur des éléments qui sont plus bas sur la page dans ce cas, la boîte continue évidemment montrant à la position haut et à gauche, ce qui signifie que je dois revenir en arrière pour le voir. Si je me débarrasse des conditions de gauche et de droite, je me retrouve avec la boîte qui apparaît au hasard dans un coin de la page.

Je souhaite également que les utilisateurs puissent quitter la boîte en cliquant simplement sur la zone black_overlay. Quelqu'un peut-il recommander une solution qui fonctionnerait avec mon code?

Answer 1

Eh bien, pas beaucoup de succès avec ma question. Je voulais vous faire savoir que j'ai changé la position du .white_content à fixed et cela a résolu mon problème de positionnement. Je travaille toujours sur la fermeture de la fenêtre en cliquant en dehors de la boîte sans changer tout mon code.