Div in der Mitte erscheinen bricht, wenn der Benutzer

Question

Ich habe den Körper/html meiner Seite wie diese mit CSS aufgebaut gescrollt hat: ein Pop-up haben

body, html { 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
    font-family: Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, Verdana, " sans-serif"; 
    font-size: 14px; 
    display: flex; 
    flex-direction: column; 
    background: #282828; 
    min-width: 100%; 
    min-height: 100%; 
} 

ich dann, dass ich auf die Seite (Körper) gelegentlich anhängen mit JQuery. Dieses Popup ist DIV wie folgt:

.error_popup_container { 
    width: 400px; 
    height: auto; 
    padding: 10px; 
    background: #454545; 
    border: solid #fafafa 2px; 
    border-radius: 1px; 
    z-index: 3; 
    position: absolute; 
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); 
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); 
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); 
    left: 50%; 
    top: 50%; 
    margin: -50px 0 0 -200px; /* 50px = half of height, 140px = half of width */ 
} 

Das Problem ist, dass die div erscheint nur in der Mitte der Seite, wenn der Benutzer nicht gescrollt hat.

Wenn der Benutzer gescrollt hat, ist das div nicht mehr sichtbar.

Ich brauche das Div in der Mitte der Seite erscheinen, egal wie weit sie gescrollt haben. Irgendwelche Ideen?

Ich habe eine Tonne gespielt, aber habe die Ursache nicht gefunden. Ich bin mir sicher, dass es etwas Einfaches ist.

Answer 1

Vereinbaren Sie mit der Position verwenden möchten: fixed; und hält es zentriert ist, würde ich verwenden:

/*modal-wrapper*/ { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%); 
} 

Wenn die modalen je länger sein wird als ein kleines Bildfenster, könnten Sie eine Medienabfrage Breakpoint mit einem Überlauf-y hinzuzufügen: blättern; Eigentum.

Answer 2

Ich glaube, Sie wahrscheinlich nur position: fixed