两个相同的模态，但一个不起作用。为什么？答案

【问题标题】：Two identical modals, but one does not work. Why?两个相同的模态，但一个不起作用。为什么？
【发布时间】：2019-12-19 15:02:43
【问题描述】：

编辑：

新代码：

const modal2 = () => {
    'use strict';
class Modal {

  constructor() {
    this.triggers = document.querySelectorAll('.js-modal2');
    this.close = document.querySelectorAll('.js-close-modal');
    this.modals = document.querySelectorAll('.modal');
    this.modalInners = document.querySelectorAll('.modal-inner');

    this.listeners();
  }

  listeners() {
    window.addEventListener('keydown', this.keyDown);

    this.triggers.forEach(el => {
      el.addEventListener('click', this.openModal, false);
    });

    this.modals.forEach(el => {
      el.addEventListener('transitionend', this.revealModal, false);
      el.addEventListener('click', this.backdropClose, false);
    });

    this.close.forEach(el => {
      el.addEventListener('click', Modal.hideModal, false);
    });

    this.modalInners.forEach(el => {
      el.addEventListener('transitionend', this.closeModal, false);
    });
  }

  keyDown(e) {
    if (27 === e.keyCode && document.body.classList.contains('modal-body')) {
      Modal.hideModal();
    }
  }

  backdropClose(el) {
    if (!el.target.classList.contains('modal-visible')) {
      return;
    }

    let backdrop = el.currentTarget.dataset.backdrop !== undefined ? el.currentTarget.dataset.backdrop : true;

    if (backdrop === true) {
      Modal.hideModal();
    }
  }

  static hideModal() {
    let modalOpen = document.querySelector('.modal.modal-visible');

    modalOpen.querySelector('.modal-inner').classList.remove('modal-reveal');
    document.querySelector('.modal-body').addEventListener('transitionend', Modal.modalBody, false);
    document.body.classList.add('modal-fadeOut');
  }

  closeModal(el) {
    if ('opacity' === el.propertyName && !el.target.classList.contains('modal-reveal')) {
      document.querySelector('.modal.modal-visible').classList.remove('modal-visible');
    }
  }

  openModal(el) {
    if (!el.currentTarget.dataset.modal) {
      console.error('No data-modal attribute defined!');
      return;
    }

    let modalID = el.currentTarget.dataset.modal2;
    let modal2 = document.getElementById(modalID);

    document.body.classList.add('modal-body');
    modal.classList.add('modal-visible');
  }

  revealModal(el) {
    if ('opacity' === el.propertyName && el.target.classList.contains('modal-visible')) {
      el.target.querySelector('.modal-inner').classList.add('modal-reveal');
    }
  }

  static modalBody(el) {
    if ('opacity' === el.propertyName && el.target.classList.contains('modal') && !el.target.classList.contains('modal-visible')) {
      document.body.classList.remove('modal-body', 'modal-fadeOut');
    }
  }}



new Modal();
};

export default modal2;

如果这会有点长，我很抱歉。我的页面上有两个 ul 元素，其中包含一个看起来像地铁地图的列表。

对于第一个 ul，我在 li 元素中创建了一个类，它获取以模式弹出的 json 数据。这种模式有效！

问题是我的第二个模态。这里我有一个简单的按钮，当我单击该按钮时，我希望弹出一个模式，其中包含我的第二个 ul 元素。问题是我不能让这个模式工作。我重命名了 html、css 和脚本中的所有内容，我快疯了，因为我找不到错误。我需要今晚完成这个项目，所以我对此越来越沮丧

我的测试页面在这里：http://handig.dk/EXAM2019/index.html 第二部分包含我的工作模式。第三个包含非工作模式。

html

`<div class="map">

            <ul>
                        <li id="getTime" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime2" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime3" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime4" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime5" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime6" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime7" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime8" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime9" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime10" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime11" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>
                        <li id="getTime12" class="js-modal" data-modal="modal-1"><a href="">Text</a></li>

             </ul>
                    <h2>Text</h2>

            <div id="modal-1" class="modal">

                <div class="modal-inner">
                    <div id="modal-body">
                      </div>
                  <a class="js-close-modal">&times;</a>
                  <div class="modal-content">

                <p class="modal-headline">Text</p>

                      </div>

                  </div><!-- .modal-content -->
                </div><!-- .modal-inner -->
              </div><!-- .modal -->

<!-- SECOND MODAL (NOT WORKING) -->

<div class="trains">
    <button class="js-modal2" data-modal="modal-2">Tjek driften</button>


            <div id="modal-2" class="modal2">

                <div class="modal-inner2">
                    <div id="modal-body2">
                      </div>
                  <a class="js-close-modal2">&times;</a>
                  <div class="modal-content2">

                <p class="modal-headline">Drift</p>
               <ul>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>
                        <li><a href="">Text</a></li>

             </ul>

                      </div>

                  </div><!-- .modal-content2 -->
                </div><!-- .modal-inner2 -->`

工作模式的 CSS

.modal-body {
  overflow: hidden;
  position: relative;
}

#modal-body {
     background:#900;
}
.modal-body:before {
  position: fixed;
  display: block;
  content: '';
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 10;
}

.modal-body:before {
  -webkit-animation: fadeIn 320ms ease;
  animation: fadeIn 320ms ease;
  transition: opacity ease 320ms;
}

.modal-body.modal-fadeOut:before {
  opacity: 0;
}


.modal {
  transition: all ease 0.01s;
  display: block;
  opacity: 0;
  height: 0;
  position: fixed;
  content: '';
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  text-align: center;
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.modal.modal-visible {
  opacity: 1;
  height: auto;
  bottom: 0;
}


.modal-inner {
  transition: all ease 320ms;
  -webkit-transform: translateY(-50px);
  transform: translateY(-50px);
  position: relative;
  display: inline-block;
  background-color: #fff;
  width: 90%;
  max-width: 600px;
  background: #fff;
  opacity: 0;
  margin: 40px 0;
  border-radius: 4px;
  box-shadow: 0 30px 18px -20px #020202;
}

.modal-inner.modal-reveal {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}


.js-close-modal {
  transition: color 320ms ease;
  color: #9e9e9e;
  opacity: 0.75;
  position: absolute;
  z-index: 2;
  right: 0px;
  top: 0px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 20px;
  cursor: pointer;
  text-align: center;
}

.js-close-modal:hover {
  color: #000;
}

.modal-headline {
    font-size: 1.5em;
    font-weight: 700;
}

.modal-content {
    letter-spacing: 1px;
}
.modal-content2 {
    letter-spacing: 1px;
}

不工作的模态CSS

.modal-body2 {
  overflow: hidden;
  position: relative;
}

#modal-body2 {
     background:#900;
}
.modal-body2:before {
  position: fixed;
  display: block;
  content: '';
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 10;
}

.modal-body2:before {
  -webkit-animation: fadeIn 320ms ease;
  animation: fadeIn 320ms ease;
  transition: opacity ease 320ms;
}

.modal-body2.modal2-fadeOut:before {
  opacity: 0;
}


.modal2 {
  transition: all ease 0.01s;
  display: block;
  opacity: 0;
  height: 0;
  position: fixed;
  content: '';
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  text-align: center;
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.modal2.modal2-visible {
  opacity: 1;
  height: auto;
  bottom: 0;
}


.modal-inner2 {
  transition: all ease 320ms;
  -webkit-transform: translateY(-50px);
  transform: translateY(-50px);
  position: relative;
  display: inline-block;
  background-color: #fff;
  width: 90%;
  max-width: 600px;
  background: #fff;
  opacity: 0;
  margin: 40px 0;
  border-radius: 4px;
  box-shadow: 0 30px 18px -20px #020202;
}

.modal-inner2.modal2-reveal {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}


.js-close-modal2 {
  transition: color 320ms ease;
  color: #9e9e9e;
  opacity: 0.75;
  position: absolute;
  z-index: 2;
  right: 0px;
  top: 0px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 20px;
  cursor: pointer;
  text-align: center;
}

.js-close-modal2:hover {
  color: #000;
}

有效的模态脚本

const modal = () => {
'use strict';
class Modal {

  constructor() {
    this.triggers = document.querySelectorAll('.js-modal');
    this.close = document.querySelectorAll('.js-close-modal');
    this.modals = document.querySelectorAll('.modal');
    this.modalInners = document.querySelectorAll('.modal-inner');

    this.listeners();
  }

  listeners() {
    window.addEventListener('keydown', this.keyDown);

    this.triggers.forEach(el => {
      el.addEventListener('click', this.openModal, false);
    });

    this.modals.forEach(el => {
      el.addEventListener('transitionend', this.revealModal, false);
      el.addEventListener('click', this.backdropClose, false);
    });

    this.close.forEach(el => {
      el.addEventListener('click', Modal.hideModal, false);
    });

    this.modalInners.forEach(el => {
      el.addEventListener('transitionend', this.closeModal, false);
    });
  }

  keyDown(e) {
    if (27 === e.keyCode && document.body.classList.contains('modal-body')) {
      Modal.hideModal();
    }
  }

  backdropClose(el) {
    if (!el.target.classList.contains('modal-visible')) {
      return;
    }

    let backdrop = el.currentTarget.dataset.backdrop !== undefined ? el.currentTarget.dataset.backdrop : true;

    if (backdrop === true) {
      Modal.hideModal();
    }
  }

  static hideModal() {
    let modalOpen = document.querySelector('.modal.modal-visible');

    modalOpen.querySelector('.modal-inner').classList.remove('modal-reveal');
    document.querySelector('.modal-body').addEventListener('transitionend', Modal.modalBody, false);
    document.body.classList.add('modal-fadeOut');
  }

  closeModal(el) {
    if ('opacity' === el.propertyName && !el.target.classList.contains('modal-reveal')) {
      document.querySelector('.modal.modal-visible').classList.remove('modal-visible');
    }
  }

  openModal(el) {
    if (!el.currentTarget.dataset.modal) {
      console.error('No data-modal attribute defined!');
      return;
    }

    let modalID = el.currentTarget.dataset.modal;
    let modal = document.getElementById(modalID);

    document.body.classList.add('modal-body');
    modal.classList.add('modal-visible');
  }

  revealModal(el) {
    if ('opacity' === el.propertyName && el.target.classList.contains('modal-visible')) {
      el.target.querySelector('.modal-inner').classList.add('modal-reveal');
    }
  }

  static modalBody(el) {
    if ('opacity' === el.propertyName && el.target.classList.contains('modal') && !el.target.classList.contains('modal-visible')) {
      document.body.classList.remove('modal-body', 'modal-fadeOut');
    }
  }}



new Modal();
};

export default modal;

不工作的模态脚本

const modal2 = () => {
'use strict';
class Modal2 {

  constructor() {
    this.triggers = document.querySelectorAll('.js-modal2');
    this.close = document.querySelectorAll('.js-close-modal2');
    this.modals = document.querySelectorAll('.modal2');
    this.modalInners = document.querySelectorAll('.modal-inner2');

    this.listeners();
  }

  listeners() {
    window.addEventListener('keydown', this.keyDown);

    this.triggers.forEach(el => {
      el.addEventListener('click', this.openModal2, false);
    });

    this.modals.forEach(el => {
      el.addEventListener('transitionend', this.revealModal2, false);
      el.addEventListener('click', this.backdropClose, false);
    });

    this.close.forEach(el => {
      el.addEventListener('click', Modal2.hideModal2, false);
    });

    this.modalInners.forEach(el => {
      el.addEventListener('transitionend', this.closeModal2, false);
    });
  }

  keyDown(e) {
    if (27 === e.keyCode && document.body.classList.contains('modal-body2')) {
      Modal2.hideModal2();
    }
  }

  backdropClose(el) {
    if (!el.target.classList.contains('modal2-visible')) {
      return;
    }

    let backdrop = el.currentTarget.dataset.backdrop !== undefined ? el.currentTarget.dataset.backdrop : true;

    if (backdrop === true) {
      Modal2.hideModal2();
    }
  }

  static hideModal2() {
    let modalOpen = document.querySelector('.modal2.modal2-visible');

    modalOpen.querySelector('.modal-inner2').classList.remove('modal2-reveal');
    document.querySelector('.modal-body2').addEventListener('transitionend', Modal2.modalBody2, false);
    document.body.classList.add('modal2-fadeOut');
  }

  closeModal2(el) {
    if ('opacity' === el.propertyName && !el.target.classList.contains('modal2-reveal')) {
      document.querySelector('.modal2.modal2-visible').classList.remove('modal2-visible');
    }
  }

  openModal(el) {
    if (!el.currentTarget.dataset.modal) {
      console.error('No data-modal attribute defined!');
      return;
    }

    let modal2ID = el.currentTarget.dataset.modal2;
    let modal2 = document.getElementById(modal2ID);

    document.body.classList.add('modal-body2');
    modal.classList.add('modal2-visible');
  }

  revealModal2(el) {
    if ('opacity' === el.propertyName && el.target.classList.contains('modal2-visible')) {
      el.target.querySelector('.modal-inner2').classList.add('modal2-reveal');
    }
  }

  static modalBody2(el) {
    if ('opacity' === el.propertyName && el.target.classList.contains('modal2') && !el.target.classList.contains('modal2-visible')) {
      document.body.classList.remove('modal-body2', 'modal2-fadeOut');
    }
  }}



new Modal2();
};

export default modal2;

【问题讨论】：

你不应该需要所有第二个模态的东西——当然 open 函数只需要数据模态属性并将其与它想要显示的模态的 id 匹配——你需要做的就是更改第二个按钮的数据属性，并为第二个模式提供一个 id 以匹配
查看您的示例页面，您在按钮数据属性中包含了错误的模态 ID，并且由于您将其他所有内容绑定到 --2 而不是模态，这可能是它无法正常工作的原因跨度>
我按照建议做了，只更改了 ID 和数据模式属性，但现在我收到了这个错误：Uncaught TypeError: Cannot read property 'classList' of null at HTMLButtonElement.openModal 问题是这一行：modal2.classList.add('modal-visible'); 我唯一做的就是添加模态后的“2”以匹配按钮上的 id
如果您只更改了按钮 2 和模式 2 的属性和模式 ID，那么 modal2 不应该存在
我在原始帖子的顶部添加了我制作的新代码。我删除了modal2，但它只是在同一个地方说“Modal is not defined”modal.classList.add('modal-visible')

标签： javascript html css ecmascript-6 simplemodal

【解决方案1】：

在您的 javascript 中，this.triggers 指的是您的按钮，但在您的函数 openModal 中，变量 modal2ID 未定义，因为您的按钮没有 dataset.modal2

【讨论】：