Есть код модального окна
let fullwindow = document.getElementById('fullblock');
/*let modal = document.getElementById('myModal');*/
let modalcontent = document.getElementsByClassName('modal-content')[0];
let loginlink = document.getElementsByClassName('loginandsignup')[0];
let elemclose = document.getElementsByClassName("closeregwindow")[0];
loginlink.onclick = function() {
modalcontent.style.display = "block";
}
elemclose.onclick = function() {
modalcontent.style.display = "none";
}
window.onclick = function(event) {
if (event.target == fullwindow) {
modalcontent.style.display = "none";
}
}
.modal-content {
display: none;
z-index: 6;
position: relative;
background-color: #E1BEE7;
margin-top: auto;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
padding: 0;
border: 5px solid #7B1FA2;
width: 50%;
height: 50%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
@-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
@keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
.closeregwindow {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.closeregwindow:hover,
.closeregwindow:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #9C27B0;
color: white;
}
.modal-body {
padding: 2px 16px;
}
.modal-footer {
padding: 2px 16px;
background-color: #9C27B0;
color: white;
}
<div id="fullblock">
<header id="pageHeader">
<div class="headerinsides">
<span class="flexcitylinkwrapper">
<a href="#" class="flexcitylink">
<span class="icon">
<svg aria-hidden="true" class="Sg" width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.057 8a2.012 2.012 0 01-2.019-2c0-1.103.906-2 2.02-2 1.113 0 2.018.897 2.018 2s-.905 2-2.019 2zm0-5C6.387 3 5.03 4.346 5.03 6s1.358 3 3.028 3 3.029-1.346 3.029-3-1.359-3-3.029-3zm0 11.777C6.852 13.5 3.01 9.177 3.01 6c0-2.757 2.264-5 5.047-5 2.784 0 5.047 2.243 5.047 5 0 3.174-3.841 7.5-5.047 8.777zM8.057 0C4.717 0 2 2.691 2 6c0 4.159 5.468 9.623 5.7 9.854a.509.509 0 00.714 0c.233-.23 5.7-5.695 5.7-9.854 0-3.309-2.716-6-6.057-6z" fill="currentColor"></path></svg>
</span>
<span class="labelforicon">
Краснодар
</span>
</a>
</span>
<span class="intermediatespace">
</span>
<span class="telephonenumber">
8 (800) 600 3900 (круглосуточно)
</span>
<span class="addressandworkschedule">
Адрес и график работы
</span>
<span class="payment">
Оплата
</span>
<span class="delivery">
Доставка
</span>
</div>
<div class="headerinsidessecondrow">
<!--<button class="catalogbutton">Каталог товаров</button>-->
<button class="catalogbutton">Каталог товаров</button>
<span class="betweenspace">
</span>
<span class="findinfo">
<input placeholder="Поиск среди 10000 товаров" class="inputsearch"></input>
<button class="searchbutton">Найти</button>
</span>
<span class="secondbetweenspace">
</span>
<span class="loginandsignup">
<span class="loginsignupimg">
<img src="../images/header_profile-icon.png">
</span>
<span class="loginsignuptext">
Вход и регистрация
</span>
</span>
<span class="basket">
<span class="loginsignupimg">
<img src="../images/header_cart-icon.png">
</span>
<span class="loginsignuptext">
Корзина
</span>
</span>
</div>
</header>
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Шапка модального окна</h2>
</div>
<div class="modal-body">
<p>Какой-то текст в теле модального окна</p>
<p>Ещё другой текст...</p>
</div>
<div class="modal-footer">
<h3>Футер модального окна</h3>
</div>
</div>
</div>
Но почему-то при щелчке на Вход и регистрация отображает
а при первом открытии страницы отображает
Нужно, чтобы модальное окно располагалось по центру над всей страницей. Подскажите как этого добиться.