При прослушивании кликов не отображается модальный - PullRequest
Новая
       0

При прослушивании кликов не отображается модальный

1 голос
/ 08 мая 2020

Я новичок в программировании и пытаюсь создать модальные окна при нажатии, но всплывающее сообщение не отображается, когда я нажимаю кнопку. Самое странное, что работает только наложение! Это было не потому, что я использовал тег вместо кнопок, потому что я попытался использовать кнопку вместо тега привязки, но все равно не работал

Вот мой фрагмент кода ниже: 

const openModalButtons = document.querySelectorAll('[data-modal-target]')
const closeModalButtons = document.querySelectorAll('[data-close-button]')
const overlay = document.getElementById('overlay')

openModalButtons.forEach(button => {
  button.addEventListener('click', () => {
    const modal = document.querySelector(button.dataset.modalTarget)
    openModal(modal)
    console.log("opened successfully");
  })
})

overlay.addEventListener('click', () => {
  const modals = document.querySelectorAll('.modal.active')
  modals.forEach(modal => {
    closeModal(modal)
  })
})

closeModalButtons.forEach(button => {
  button.addEventListener('click', () => {
    const modal = button.closest('.modal')
    closeModal(modal)
  })
})

function openModal(modal) {
  if (modal == null) return
  modal.classList.add('active')
  overlay.classList.add('active')
}

function closeModal(modal) {
  if (modal == null) return
  modal.classList.remove('active')
  overlay.classList.remove('active')
}
body {
    background-image: linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)), url('images/blue_checkered_table.jpg'); 
}
  
.title {
    display:inline-block;
    text-decoration: none;
    padding: 15px;
    -webkit-text-stroke: 1px black;
    color: white;
    text-shadow:
        2px 2px 0 #000,
      -1px -1px 0 #000,  
       1px -1px 0 #000,
       -1px 1px 0 #000,
        1px 1px 0 #000;
}

.title:hover {
    text-decoration: none;
    -webkit-text-stroke: 1px black;
    color: #76B9F6;
    text-shadow:
        2px 2px 0 black,
      -1px -1px 0 black,  
       1px -1px 0 black,
       -1px 1px 0 black,
        1px 1px 0 black;
} 

#mySidenav a {
    margin: 120px 0px 0px 0px;
    position: absolute;
    left: -150px;
    transition: 0.3s;
    padding: 20px;
    width: 200px;
    text-decoration: none;
    font-size: 20px;
    color: white;
    border-radius: 0 5px 5px 0;
  }
  
  #mySidenav a:hover {
    left: 0;
  }
  
  #about {
    display:inline-block;
    text-decoration: none;
    padding: 15px;
    color: white;
    text-shadow:
        2px 2px 0 #000,
      -1px -1px 0 #000,  
       1px -1px 0 #000,
       -1px 1px 0 #000,
        1px 1px 0 #000;
    top: 5px;
    background-color: #4CAF50;
  }
  
  #calendar {
    display:inline-block;
    text-decoration: none;
    padding: 15px;
    color: white;
    text-shadow:
        2px 2px 0 #000,
      -1px -1px 0 #000,  
       1px -1px 0 #000,
       -1px 1px 0 #000,
        1px 1px 0 #000;
    top: 85px;
    background-color: #2196F3;
  }
  
  #todo {
    display:inline-block;
    text-decoration: none;
    padding: 15px;
    color: white;
    text-shadow:
        2px 2px 0 #000,
      -1px -1px 0 #000,  
       1px -1px 0 #000,
       -1px 1px 0 #000,
        1px 1px 0 #000;
    top: 165px;
    background-color: #f44336;
  }
  
  #feedback {
    display:inline-block;
    text-decoration: none;
    padding: 15px;
    color: white;
    text-shadow:
        2px 2px 0 #000,
      -1px -1px 0 #000,  
       1px -1px 0 #000,
       -1px 1px 0 #000,
        1px 1px 0 #000;
    top: 245px;
    background-color: #555
  }

  *, *::after, *::before {
    box-sizing: border-box;
  }
  
  .modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 200ms ease-in-out;
    border: 1px solid black;
    border-radius: 10px;
    z-index: 10;
    background-color: white;
    width: 500px;
    max-width: 80%;
  }
  
  .modal.active {
    transform: translate(-50%, -50%) scale(1);
  }
  
  .modal-header {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid black;
  }
  
  .modal-header .title {
    font-size: 1.25rem;
    font-weight: bold;
  }
  
  .modal-header .close-button {
    cursor: pointer;
    border: none;
    outline: none;
    background: none;
    font-size: 1.25rem;
    font-weight: bold;
  }
  
  .modal-body {
    padding: 10px 15px;
  }
  
  #overlay {
    position: fixed;
    opacity: 0;
    transition: 200ms ease-in-out;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    pointer-events: none;
  }
  
  #overlay.active {
    opacity: 1;
    pointer-events: all;
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Spin the Wheel</title>
   
    <meta name="author" content="Team26">

    <!----------------------------------------------->
    <!--  Meta tag for rendering on mobile devices -->
    <!----------------------------------------------->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <!----------------------------------------------->
    <!-- CSS: Bootstrap, Firebase, other API -->
    <!----------------------------------------------->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" />
   
    <!------------------------>
    <!-- Your own CSS files -->
    <!------------------------>
    <link rel="stylesheet" type="text/css" href="mainpage.css">
    <script type="text/javascript" defer src="mainpage.js"></script>
 
</head>
<body>
    <!----------------------->
    <!--  HTML Section -->
    <!----------------------->
<a href="mainpage.html" class="title"><h1>Project Spin The Wheel</h1></a>
<div id="mySidenav" class="sidenav">
    <a data-modal-target="#modal" id="about">About</a>
    <a href="#" id="calendar">Calendar</a>
    <a href="#" id="todo">My To-Do List</a>
    <a href="#" id="feedback">Feedback</a>
  </div>
    <div class="modal" id="modal">
      <div class="modal-header">
        <div class="title">A b o u t  U s . . .</div>
        <button data-close-button class="close-button">&times;</button>
      </div>
      <div class="modal-body">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Esse quod alias ut illo doloremque eum ipsum obcaecati distinctio debitis reiciendis 
        quae quia soluta totam doloribus quos nesciunt necessitatibus, 
        consectetur quisquam accusamus ex, dolorum, dicta vel? 
        Nostrum voluptatem totam, molestiae rem at ad autem dolor ex aperiam. 
        Amet assumenda eos architecto, dolor placeat deserunt voluptatibus 
        tenetur sint officiis perferendis atque! Voluptatem maxime eius eum 
        dolorem dolor exercitationem quis iusto totam! Repudiandae nobis 
        nesciunt sequi iure! Eligendi, eius libero. Ex, repellat sapiente!
      </div>
    </div>
    <div id="overlay"></div>

  </div>


</body>
    <!----------------------------------------------->
    <!-- JS: Boostrap, Firebase, API related    -->
    <!----------------------------------------------->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <script src="https://www.gstatic.com/firebasejs/7.9.2/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.9.2/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.9.2/firebase-firestore.js"></script>
    <script src="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.js"></script>
  
  
    <!--------------------------------------------------------------------->
    <!-- JS files: Your own JavaScript functions included here    -->
    <!--------------------------------------------------------------------->

     <!--------------------------------------------------------------------->
    <!-- Make calls to your own JavaScript functions, here below-->
    <!---------------------------------------------------------------------->

</html>

1 Ответ

0 голосов
/ 08 мая 2020

Вы забыли добавить правильный CSS для отображения модального окна, просто добавьте display:block в .active class: 

.modal.active {
  transform: translate(-50%, -50%) scale(1);
  display:block;
  top:50%;
  left:50%;
}

Вот рабочий фрагмент: 

const openModalButtons = document.querySelectorAll('[data-modal-target]')
const closeModalButtons = document.querySelectorAll('[data-close-button]')
const overlay = document.getElementById('overlay')

openModalButtons.forEach(button => {
  button.addEventListener('click', () => {
    const modal = document.querySelector(button.dataset.modalTarget)
    openModal(modal)
    console.log("opened successfully");
  })
})

overlay.addEventListener('click', () => {
  const modals = document.querySelectorAll('.modal.active')
  modals.forEach(modal => {
    closeModal(modal)
  })
})

closeModalButtons.forEach(button => {
  button.addEventListener('click', () => {
    const modal = button.closest('.modal')
    closeModal(modal)
  })
})

function openModal(modal) {

  if (modal == null) return
  modal.classList.add('active')
  overlay.classList.add('active')
}

function closeModal(modal) {
  if (modal == null) return
  modal.classList.remove('active')
  overlay.classList.remove('active')
}
body {
    background-image: linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)), url('images/blue_checkered_table.jpg'); 
}
  
.title {
    display:inline-block;
    text-decoration: none;
    padding: 15px;
    -webkit-text-stroke: 1px black;
    color: white;
    text-shadow:
        2px 2px 0 #000,
      -1px -1px 0 #000,  
       1px -1px 0 #000,
       -1px 1px 0 #000,
        1px 1px 0 #000;
}

.title:hover {
    text-decoration: none;
    -webkit-text-stroke: 1px black;
    color: #76B9F6;
    text-shadow:
        2px 2px 0 black,
      -1px -1px 0 black,  
       1px -1px 0 black,
       -1px 1px 0 black,
        1px 1px 0 black;
} 

#mySidenav a {
    margin: 120px 0px 0px 0px;
    position: absolute;
    left: -150px;
    transition: 0.3s;
    padding: 20px;
    width: 200px;
    text-decoration: none;
    font-size: 20px;
    color: white;
    border-radius: 0 5px 5px 0;
  }
  
  #mySidenav a:hover {
    left: 0;
  }
  
  #about {
    display:inline-block;
    text-decoration: none;
    padding: 15px;
    color: white;
    text-shadow:
        2px 2px 0 #000,
      -1px -1px 0 #000,  
       1px -1px 0 #000,
       -1px 1px 0 #000,
        1px 1px 0 #000;
    top: 5px;
    background-color: #4CAF50;
  }
  
  #calendar {
    display:inline-block;
    text-decoration: none;
    padding: 15px;
    color: white;
    text-shadow:
        2px 2px 0 #000,
      -1px -1px 0 #000,  
       1px -1px 0 #000,
       -1px 1px 0 #000,
        1px 1px 0 #000;
    top: 85px;
    background-color: #2196F3;
  }
  
  #todo {
    display:inline-block;
    text-decoration: none;
    padding: 15px;
    color: white;
    text-shadow:
        2px 2px 0 #000,
      -1px -1px 0 #000,  
       1px -1px 0 #000,
       -1px 1px 0 #000,
        1px 1px 0 #000;
    top: 165px;
    background-color: #f44336;
  }
  
  #feedback {
    display:inline-block;
    text-decoration: none;
    padding: 15px;
    color: white;
    text-shadow:
        2px 2px 0 #000,
      -1px -1px 0 #000,  
       1px -1px 0 #000,
       -1px 1px 0 #000,
        1px 1px 0 #000;
    top: 245px;
    background-color: #555
  }

  *, *::after, *::before {
    box-sizing: border-box;
  }
  
  .modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 200ms ease-in-out;
    border: 1px solid black;
    border-radius: 10px;
    z-index: 10;
    background-color: white;
    width: 500px;
    max-width: 80%;
  }
  
  .modal.active {
    transform: translate(-50%, -50%) scale(1);
    display:block;
    top:50%;
    left:50%;
  }
  
  .modal-header {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid black;
  }
  
  .modal-header .title {
    font-size: 1.25rem;
    font-weight: bold;
  }
  
  .modal-header .close-button {
    cursor: pointer;
    border: none;
    outline: none;
    background: none;
    font-size: 1.25rem;
    font-weight: bold;
  }
  
  .modal-body {
    padding: 10px 15px;
  }
  
  #overlay {
    position: fixed;
    opacity: 0;
    transition: 200ms ease-in-out;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    pointer-events: none;
  }
  
  #overlay.active {
    opacity: 1;
    pointer-events: all;
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Spin the Wheel</title>
   
    <meta name="author" content="Team26">

    <!----------------------------------------------->
    <!--  Meta tag for rendering on mobile devices -->
    <!----------------------------------------------->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <!----------------------------------------------->
    <!-- CSS: Bootstrap, Firebase, other API -->
    <!----------------------------------------------->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" />
   
    <!------------------------>
    <!-- Your own CSS files -->
    <!------------------------>
    <link rel="stylesheet" type="text/css" href="mainpage.css">
    <script type="text/javascript" defer src="mainpage.js"></script>
 
</head>
<body>
    <!----------------------->
    <!--  HTML Section -->
    <!----------------------->
<a href="mainpage.html" class="title"><h1>Project Spin The Wheel</h1></a>
<div id="mySidenav" class="sidenav">
    <a data-modal-target="#modal" id="about">About</a>
    <a href="#" id="calendar">Calendar</a>
    <a href="#" id="todo">My To-Do List</a>
    <a href="#" id="feedback">Feedback</a>
  </div>
    <div class="modal" id="modal">
      <div class="modal-header">
        <div class="title">A b o u t  U s . . .</div>
        <button data-close-button class="close-button">&times;</button>
      </div>
      <div class="modal-body">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
        Esse quod alias ut illo doloremque eum ipsum obcaecati distinctio debitis reiciendis 
        quae quia soluta totam doloribus quos nesciunt necessitatibus, 
        consectetur quisquam accusamus ex, dolorum, dicta vel? 
        Nostrum voluptatem totam, molestiae rem at ad autem dolor ex aperiam. 
        Amet assumenda eos architecto, dolor placeat deserunt voluptatibus 
        tenetur sint officiis perferendis atque! Voluptatem maxime eius eum 
        dolorem dolor exercitationem quis iusto totam! Repudiandae nobis 
        nesciunt sequi iure! Eligendi, eius libero. Ex, repellat sapiente!
      </div>
    </div>
    <div id="overlay"></div>

  </div>


</body>
    <!----------------------------------------------->
    <!-- JS: Boostrap, Firebase, API related    -->
    <!----------------------------------------------->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <script src="https://www.gstatic.com/firebasejs/7.9.2/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.9.2/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.9.2/firebase-firestore.js"></script>
    <script src="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.js"></script>
  
  
    <!--------------------------------------------------------------------->
    <!-- JS files: Your own JavaScript functions included here    -->
    <!--------------------------------------------------------------------->

     <!--------------------------------------------------------------------->
    <!-- Make calls to your own JavaScript functions, here below-->
    <!---------------------------------------------------------------------->

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...