@nikitasalnikov
Новичок

Почему закрывается модальное окно, при нажатии на кнопку?

кто подскажет, почему закрывается сразу же модальное окно при нажатии на кнопку. при чем если делать в пустом html то нормально работает. вставляю код в уже сверстанную страницу, окно закрывается при вызове. бустрап не использую. только html, немного css и JS.
<form class="nav-link-btn">
  <a href="">Start free trial</a>
  <div class="modal" id="myModal">
    <span class="close">&times;</span>
    <input type="email" placeholder="Email">
    <input type="password" placeholder="Password">
    <button class="btn"></button>
  </div>
  <button class="login" id="myBtn">Log in</button>
</form>

.login {
  width: 80px;
  height: 40px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #550088;
  box-sizing: border-box;
  border-radius: 4px;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  width: 450px;
  height: 250px;
  background: lightgray;
  overflow: auto;
  padding: 30px 0px 0 30px;
  border-radius: 10px;
}

.close {
  margin-right: 15px;
  font-size: 28px;
  font-weight: bold;
  color: black;
  float: right;
}

var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}
span.onclick = function() {
  modal.style.display = "none";
}
  • Вопрос задан
  • 322 просмотра
Пригласить эксперта
Ответы на вопрос 2
nazares
@nazares
Software Engineer
<form onsubmit="return false;" class="nav-link-btn">


https://jsfiddle.net
Ответ написан
budfy
@budfy
Верстальщик головой
Потому что кнопка, помещённая внутрь формы имеет по умолчанию тип submit, что выполняет событие submit формы, соответственно и перезагружает страницу.
Чтобы это исправить следует кнопкам внутри формы написать <button type=button>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы