verhindern Körper Scroll auf Modal schließen

Question

Ich habe eine einfache html/css modalen Dialog, den ich mit einer Schaltfläche schließen und onclick Event Handler in Javascript. Wenn das modale Fenster geschlossen ist, scrollt der Körper der Website zum oberen Rand des Bildschirms. Ich muss das verhindern. Hier ist mein Code:

function modalClose() { 
 
    if (location.hash == '#log_in') { 
 
    location.hash = ''; 
 
    } 
 
} 
 
// Handle ESC key (key code 27) 
 
document.addEventListener('keyup', function(e) { 
 
    if (e.keyCode == 27) { 
 
    modalClose(); 
 
    } 
 
}); 
 
var modal = document.querySelector('#log_in'); 
 
// Handle click on the modal container 
 
modal.addEventListener('click', modalClose, false); 
 
// Prevent event bubbling if click occurred within modal content body 
 
modal.children[0].addEventListener('click', function(e) { 
 
    e.stopPropagation(); 
 
}, false);

.modalDialog { 
 
    position: fixed; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background: rgba(0, 0, 0, 0.8); 
 
    z-index: 99999; 
 
    opacity: 0; 
 
    -webkit-transition: opacity 400ms ease-in; 
 
    -moz-transition: opacity 400ms ease-in; 
 
    transition: opacity 400ms ease-in; 
 
    pointer-events: none; 
 
} 
 
.modalDialog:target { 
 
    opacity: 1; 
 
    pointer-events: auto; 
 
} 
 
.modalDialog > div { 
 
    height: auto; 
 
    width: 75%; 
 
    position: relative; 
 
    margin-top: 2%; 
 
    margin-bottom: 10%; 
 
    margin-left: 10%; 
 
    margin-right: 10%; 
 
    padding: 5px 20px 13px 20px; 
 
    border-radius: 10px; 
 
    background: #fff; 
 
} 
 
.close { 
 
    background: #606061; 
 
    color: #FFFFFF; 
 
    line-height: 25px; 
 
    position: absolute; 
 
    right: -11px; 
 
    text-align: center; 
 
    top: -10px; 
 
    width: 24px; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
    -webkit-border-radius: 12px; 
 
    -moz-border-radius: 12px; 
 
    border-radius: 12px; 
 
    -moz-box-shadow: 1px 1px 3px #000; 
 
    -webkit-box-shadow: 1px 1px 3px #000; 
 
    box-shadow: 1px 1px 3px #000; 
 
    text-indent: 0px; 
 
} 
 
.close:hover { 
 
    background: navy; 
 
}

<link href="https://thomaswurdinger.com/Store_Reboot/css/styles.css" rel="stylesheet" /> 
 
<script src="https://thomaswurdinger.com/Store_Reboot/js/js.js"></script> 
 
<link href="https://thomaswurdinger.com/Store_Reboot/css/style.css" rel="stylesheet" /> 
 
<div id="log_in" class="modalDialog"> 
 
<div> 
 
    <a href="#close" title="Close" class="close">X</a> 
 
    <div>Modal Contents</div> 
 
</div> 
 
</div>

Answer 1

I geändert:

if (location.hash == '#log_in') { 
location.hash = ''; 
} 

zu:

if (location.hash == '#log_in') { 
location.hash = 'pagename.php'; 
}