JavaScript prosty pop-up

Witam postanowiłem zrobić pop-up'a na stronę jednak po kliknięciu w element pop-up pojawia się na 1s , i to nie zawsze. Plik js jest osobno, podlinkowany na końcu body.

var but = document.querySelector('.show-modal');

var show = () => {
    document.querySelector('.modal-wrap').classList.add('active');
}

but.addEventListener("click", show);

HTML:

 <nav>
        <ul class="list-left">
            <li><a href="">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Skills</a></li>
            <li><a href="">Projects</a></li>
        </ul>
        <ul class="list-right">
            <li><a href="" class="show-modal">Sign in</a></li>
            <li><a href="">Sign up</a></li>
        </ul>
    </nav>
    <section class="modal-wrap">
        <div class="modal">
            <div class="modal-content">

            </div>
        </div>
    </section>

CSS:

/* test */
.modal-wrap {
    display: none;
}

.modal-wrap.active {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
}

.modal-wrap.active .modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
    background-color: black;
}

.modal-content {
    background-color: #fff;
    width: 100%;
    height: 100%;
}

Dodałeś event listener na element "A", czyli link, który po kliknięciu przeładowuje Ci stronę - dlatego popup Ci znika.