Какой код javascript мне не хватает, чтобы мои модалы открывались при нажатии? - PullRequest
Новая
       7

Какой код javascript мне не хватает, чтобы мои модалы открывались при нажатии?

0 голосов
/ 04 июня 2018

Я наткнулся на камень преткновения и не могу понять, чего мне не хватает в моем Javascript, чтобы позволить каждому модальному окну открываться при нажатии кнопки.Прямо сейчас, первая кнопка работает и вызывает мое фото 1, но остальные не делают ничего, кроме свойства hover.Я пытался добавить разные классы, контейнеры и посмотрел в Интернете, чтобы увидеть, могу ли я найти, в чем заключается моя проблема.Я уверен, что это, вероятно, что-то простое, что я просто забываю.

Вот мой код ручки:

https://codepen.io/benjamin-schneider82/pen/qKbZzg 

// Animate smooth scroll

$('#view-work').on('click', function() {
  const images = $('#images').position().top;

  $('html, body').animate({
      scrollTop: images
    },
    900
  );
});

// Get modal element
var modal = document.getElementById('simpleModal');

// Get open modal button
var modalBtn = document.getElementById('modalBtn');


// Get close button
var closeBtn = document.getElementsByClassName('closeBtn')[0];

// Listen for open click
modalBtn.addEventListener('click', openModal);

// Listen for close click
closeBtn.addEventListener('click', closeModal);

// Listen for Outside click
window.addEventListener('click', clickOutside);



// Function to open modal
function openModal() {
  modal.style.display = 'block';
}

// Function to close modal
function closeModal() {
  modal.style.display = 'none';
}

// Function to close modal if outside click
function clickOutside(e) {
  if (e.target == modal) {
    modal.style.display = 'none';
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="landing-image"></div>
<div id="images">
  <div id="header">
    <h2>My Projects</h2>
  </div>

  <div class="container">
    <button id="modalBtn" class="button"><img src="https://source.unsplash.com/1600x900/?nature,water" alt=""></button>
    <div id="simpleModal" class="modal">
      <div class="modal-content">
        <div class="modal-header">
          <span class="closeBtn">&times;</span>
          <a href="http://www.developitben.com">
            <h2>Photo One</h2>
          </a>
        </div>
        <div class="modal-body">
          <img src="https://source.unsplash.com/1600x900/?nature,water" alt="">
        </div>
        <div class="modal-footer">
          <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, cupiditate.</h3>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <button id="modalBtn" class="button"><img src="https://source.unsplash.com/1600x900/?nature,water" alt=""></button>
    <div id="simpleModal" class="modal">
      <div class="modal-content">
        <div class="modal-header">
          <span class="closeBtn">&times;</span>
          <h2>Photo Two</h2>
        </div>
        <div class="modal-body">
          <img src="https://source.unsplash.com/1600x900/?nature,water" alt="">
        </div>
        <div class="modal-footer">
          <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, cupiditate.</h3>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <button id="modalBtn" class="button"><img src="https://source.unsplash.com/1600x900/?nature,water" alt=""></button>
    <div id="simpleModal" class="modal">
      <div class="modal-content">
        <div class="modal-header">
          <span class="closeBtn">&times;</span>
          <h2>Photo Three</h2>
        </div>
        <div class="modal-body">
          <img src="https://source.unsplash.com/1600x900/?nature,water" alt="">
        </div>
        <div class="modal-footer">
          <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, cupiditate.</h3>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <button id="modalBtn" class="button"><img src="https://source.unsplash.com/1600x900/?nature,water" alt=""></button>
    <div id="simpleModal" class="modal">
      <div class="modal-content">
        <div class="modal-header">
          <span class="closeBtn">&times;</span>
          <h2>Photo Four</h2>
        </div>
        <div class="modal-body">
          <img src="https://source.unsplash.com/1600x900/?nature,water" alt="">
        </div>
        <div class="modal-footer">
          <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, cupiditate.</h3>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <button id="modalBtn" class="button"><img src="https://source.unsplash.com/1600x900/?nature,water" alt=""></button>
    <div id="simpleModal" class="modal">
      <div class="modal-content">
        <div class="modal-header">
          <span class="closeBtn">&times;</span>
          <h2>Photo Five</h2>
        </div>
        <div class="modal-body">
          <img src="https://source.unsplash.com/1600x900/?nature,water" alt="">
        </div>

Спасибо за ваше время!

Бен

...