1

Модальное онко на JS, CSS и HTML не появляется.

HTML файл:

<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8" />
   <title>мода</title>
   <link rel="stylesheet" href="styleses.css" />

  </head>

  <body>

   <img src = "catara1.jpg" class = "catara1_class" id = "open-modal">

   <div id = "modal1" class  = "modal">
    <div class = "modal_content">
     <span class = "modal_close">&times;</span>
     <img class = "catara2_class" src="catara2.jpg">
    </div>
   </div>


   <script src = "cotick\kava.js"></script>
  </body>
 </html>

CSS файл:

.catara1_class 
{
 display: block;

 height: auto;
 min-height: 100px;
 max-height: 500px;
 width: auto;
 min-width: 50px;
 max-width: 250px;
}

.modal 
{
 display: none;
 position: fixed;
 z-index: 1;
 left: 0;
 top: 0;

 width: 50%;
 height: 50%;

 overflow: auto;
 background-color: rgba(0, 0, 0, 0.4);

}

.modal_active 
{
 display: block;
}

.modal_content
{
 background-color: whitesmoke;
 width: 100%;
 padding: 2rem;
 border: 1px solid darkgray;
 margin: 15% auto 0;
 box-shadow: 0 4px 8px black;

 position: relative;
 animation-name: animatetop;
 animation-duration: 0.4s;
}


.modal_close 
{
 color: darkgray;
 float: right;

 font-size: 28px;
 font-weight: bold;

}

.modal_close:hover, 
.modal_close:focus 
{
 color: black;
 text-decoration: none;
 cursor:pointer;

}

 @keyframes animatetop 
 {
  from 
  {
   top: -300px;
   opacity: 0;
  }

  to 
  {
   top: 0;
   opacity: 1
   
  }

 }

JS :

const btn = document.getElementById('open-modal');
const modal = document.getElementById('modal1');

const closeBtn = document.querySelectorAll('modal_close');

btn.onclick = () => 
{

  modal.classList.add(".modal_active");
  modal.addEventListener('click', hideModal);

  closeBtn.classList.add('.modal_close');
  closeBtn.addEventListener('click', closeModal);

  function closeModal() 
  {
    modal.classList.remove(".modal_active");
    closeBtn.removeEventListener("click", closeModal);
  }

  function hideModal(event) 
  {
    if (event.target == modal) 
    {
        closeModal;
    }
  }
};

Идея, при нажатии на изображение должно появлятся модальное окно с функцией закрытия на "пустое" место или на крестик справа вверху.

4
  • А в консоли что пишет, или там ничего?
    – Austral1a
    12 янв 2021 в 18:33
  • @dresser GET file:///D:/workspaceVsCode/cotick/cotick/kava.js net::ERR_FILE_NOT_FOUND
    – goha
    12 янв 2021 в 19:08
  • 1
    modal.classList.add(".modal_active") без точки вот так - modal.classList.add("modal_active");
    – Austral1a
    12 янв 2021 в 19:11
  • @dresser да, только что заметил
    – goha
    12 янв 2021 в 19:12

1 ответ 1

0
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<img href='/path' class="catara1_class" id = "open-modal" />

   <div id = "modal1" class  = "modal">
    <div class = "modal_content">
     <span class = "modal_close">&times;</span>
     <img class = "catara2_class" src="catara2.jpg">
    </div>
   </div>
</body>
</html>
const btn = document.getElementById('open-modal');
const modal = document.getElementById('modal1');

const closeBtn = document.querySelectorAll('modal_close');

btn.onclick = () => 
{
  modal.classList.add("modal_active");
  modal.addEventListener('click', hideModal);

  closeBtn.classList.add('modal_close');
  closeBtn.addEventListener('click', closeModal);

  function closeModal() 
  {
    modal.classList.remove("modal_active");
    closeBtn.removeEventListener("click", closeModal);
  }

  function hideModal(event) 
  {
  console.log(event.target)
    if (event.target.className == "modal") 
    {
        closeModal();
    }
  }
};

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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