1

кто подскажет, почему закрывается сразу же модальное окно при нажатии на кнопку. при чем если делать в пустом html то нормально работает. вставляю код в уже сверстанную страницу, окно закрывается при вызове. бустрап не использую. только html, немного css и JS.

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";
}
.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;
}
<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>

1 ответ 1

3
<button class="login" id="myBtn">Log in</button>

Добавьте кнопке type="button", т.к. из-за того, что у вас кнопка внутри form, у вас сразу после клика происходит перезагрузка страницы.

2
  • спасибо, помогло. а почему же тогда в пустом html файле работает и без type? 15 мая 2021 в 14:33
  • Вся проблема у вас в form и отсутствии type на кнопке. По умолчанию, при отсутствии type у баттона, браузер дописывает этот параметр сам, и дописывает он его как type="submit", что приводит к отправке формы с последующей перезагрузкой страницы.
    – Pilaton
    15 мая 2021 в 14:38

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.