Доброго времени суток. Есть сайт
https://xn-----6kcbtgxakbgi3a6bhhneu5dvg6b.xn--p1ai/
Внизу страницы есть кнопка "Создать сейчас", по ее нажатию должно открываться модальное окно, но не открывается.
На других сайтах это модальное окно открывается без проблем.
Но если перейти по прямой ссылке -
https://xn-----6kcbtgxakbgi3a6bhhneu5dvg6b.xn--p1a... - то оно открывается. Не работает именно кнопка. Почему так? Объясните пожалуйста.
HTML Модального:
<div id="openModal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
На данный момент проект в разработке, оставьте свой email
<a href="#close" title="Закрыть" class="close">×</a>
</div>
<div class="modal-body">
<form name="sendform" action="thanks.php" method="POST">
<input name="name" placeholder="Ваше Имя" type="text" style="border: 1px solid #aaaaaa;width: 22em;height: 2em" required> <br> <br>
<select name="counter" style="border: 1px solid #aaaaaa;width: 22em;height: 2em; padding-top: 0.19em" class="form-select">
<option selected>Выберите количество</option>
<option value="до 5 чел.">до 5 чел.</option>
<option value="от 5 до 10 чел.">от 5 до 10 чел.</option>
<option value="более 10 чел.">более 10 чел.</option>
</select>
<br> <br>
<input name="email" placeholder="Электронный адрес" type="text" style="border: 1px solid #aaaaaa;width: 22em;height: 2em" required>
<br> <br>
<button class="c-button c-button--primary c-button" type="submit">ОТПРАВИТЬ</button>
</form>
</div>
</div>
</div>
</div>
CSS Модального:
<style>
/* свойства модального окна по умолчанию */
.modal {
position: fixed; /* фиксированное положение */
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.5); /* цвет фона */
z-index: 1050;
opacity: 0; /* по умолчанию модальное окно прозрачно */
-webkit-transition: opacity 200ms ease-in;
-moz-transition: opacity 200ms ease-in;
transition: opacity 200ms ease-in; /* анимация перехода */
pointer-events: none; /* элемент невидим для событий мыши */
margin: 0;
padding: 0;
}
/* при отображении модального окно */
.modal:target {
opacity: 1; /* делаем окно видимым */
pointer-events: auto; /* элемент видим для событий мыши */
overflow-y: auto; /* добавляем прокрутку по y, когда элемент не помещается на страницу */
}
/* ширина модального окна и его отступы от экрана */
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
@media (min-width: 576px) {
.modal-dialog {
max-width: 500px;
margin: 30px auto; /* для отображения модального окна по центру */
}
}
/* свойства для блока, содержащего контент модального окна */
.modal-content {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.2);
border-radius: .3rem;
outline: 0;
}
@media (min-width: 768px) {
.modal-content {
-webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
box-shadow: 0 5px 15px rgba(0,0,0,.5);
}
}
/* свойства для заголовка модального окна */
.modal-header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 15px;
border-bottom: 1px solid #eceeef;
}
.modal-title {
margin-top: 0;
margin-bottom: 0;
line-height: 1.5;
font-size: 1.25rem;
font-weight: 500;
}
/* свойства для кнопки "Закрыть" */
.close {
float: right;
font-family: sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: .5;
text-decoration: none;
}
/* свойства для кнопки "Закрыть" при нахождении её в фокусе или наведении */
.close:focus, .close:hover {
color: #000;
text-decoration: none;
cursor: pointer;
opacity: .75;
}
/* свойства для блока, содержащего основное содержимое окна */
.modal-body {
position: relative;
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 15px;
overflow: auto;
}
</style>
Кнопка:
<div class="button-wrapper-full-width">
<a class="cta-medium mobile w-button" href="#openModal">Создать сейчас</a>
</div>
Простой
Простой