Есть адаптивное модальное окно, на компе оно строго по середине, а на телефоне получается сверху, помогите подправить код.Выставлял margin-top но на телефоне с летает и все равно сверху распологается.
.modalDialog {
overflow: auto;
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;
display: none;
}
.modalDialog:target {
display: block;
pointer-events: auto;
}
.modalDialog>div {
margin-top: 50px;
width: 200px;
position: relative;
margin: 20% auto;
padding: 5px 5px 5px 5px;
border-radius: 5px;
background: #fff;
}
.close {
background: #7f1a1a;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 15px;
text-decoration: none;
font-weight: bold;
border-radius: 16px;
}
<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Закрыть" class="close">x</a>
<h2>Оставьте заявку</h2>
<form enctype="multipart/form-data" method="post" id="form">
<input placeholder="Введите ваше имя" name="name" class="name1" type="text">
<input placeholder="Введите ваш номер" name="number" class="number1" type="text">
<input placeholder="Введите ваш email" name="email" class="email1" type="text">
<p><input value="Отправить" class="SuperButton" type="submit"></p>
</form>
</div>
</div>
<a href="#openModal" class="to_contact">Нажмите</a>