Не получается сделать модальное окно да чистом JS?

Question

[dg_96]

0
голос «против»
избранное
Нужно сделать так чтобы блок с формой появлялся при нажатии на кнопочку. Пытался пытался и что то ну совсем не получается, кто подскажет кто не так или может я вообще скрипт не правильно написал. Заранее спасибо! И P.S не могу использовать различные библиотеки нужен чистый Js

https://cloud.mail.ru/public/oMnL/Cj9tRTc9N ( не вирус не спам внутри ничего нет кроме моего сайта )

Вот ссылка на весь проэкт.

Comments

[Анатолий]

Спасибо за сайт :)

[ой всё]

не очень поняла что мы должны делать

[Bohdan Yurchuck]

var link = document.querySelector(".login"); // пункт меню логин
var popup = document.querySelector(".modal-content"); // модальное окно
var close = popup.querySelector(".modal-content-close"); // закрывашка окна

link.addEventListener("click", function(event){
event.preventDefault();
popup.classList.add("modal-content-show"); // клас в цсс, например display: block
overlay.classList.add("modal-content-show");

});

close.addEventListener("click", function(event){
event.preventDefault();
popup.classList.remove("modal-content-show");
overlay.classList.remove("modal-content-show");
});

[dg_96]

Bohdan Yurchuck, спасибо, но не получилось(( классы меняет но видимости никакой

[Bohdan Yurchuck]

dg_96, раз классы меняет значит все верно со скриптом)
надо цсс смотреть, я уверен там проблема.

Answer 1

[Антон]

#modal {
  display: none;
  position: fixed;
  z-index: 999;
  background-color: rgba(0, 0, 0, .5);
  top: 0; left: 0; right: 0; bottom: 0;
}
#modal:target {
  display: block;
}

<a href="#modal">Open</a>
<div id="modal">MODAL CONTENT</div>