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

Question

[Никита Сальников]

кто подскажет, почему закрывается сразу же модальное окно при нажатии на кнопку. при чем если делать в пустом 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";
}

Comments

[AUser0]

Сначала подскажите, нажатие на какую именно кнопку закрывает какой именно модальный элемент?
А может у вас просто происходит submit формы, в которой кнопка находится?

[Никита Сальников]

AUser0, при нажатии на кнопку Log in нужно чтобы открылось модальное окно с формой авторизации. Но окно открывается, тут же закрывается и страница перезагружается. Если я в новом пустом html файле вставляю этот кусочек html, css, js кода, все работает как положено. Открывается при клике по кнопке, закрывается при клике по span. А вот в файле заполненном кодом и контентом, почему то не работает.

[AUser0]

Поменяйте у кнопки Log In её id с myBtn (который вполне возможно ещё где-то используется) на что-нибудь уникальное, какое-нибудь myLogin1234. В JS-коде соответственно тоже нужно поменять.

[Никита Сальников]

AUser0, поменял не помогло.

[AUser0]

Хмммм. Тогда уберите class у этой кнопки, возможно это поможет.
А вы в коде нигде не вешаете обработчиков на элементы button?

О! Добавьте в функции для btn.click какой-нибудь alert(123);
Так хотя-бы узнаем, что эта функция действительно выполняется.

Answer 1

[Sergei Nazarenko]

<form onsubmit="return false;" class="nav-link-btn">

https://jsfiddle.net

Comments

[Roman Serdyuk]

Я бы так не делал. Во-первых, дурной тон навешивать события атрибутами. А во-вторых, как тогда отправить форму?

Answer 2

[Roman Serdyuk]

Потому что кнопка, помещённая внутрь формы имеет по умолчанию тип submit, что выполняет событие submit формы, соответственно и перезагружает страницу.
Чтобы это исправить следует кнопкам внутри формы написать <button type=button>