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

问题描述 投票：0回答：1

很抱歉，如果要这么长的话。我的页面上有两个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;
javascript html css ecmascript-6 simplemodal
1个回答
0
投票

在您的JavaScript中，this.triggers引用了您的按钮，但是在您的函数openModal中，未定义变量modal2ID，因为您的按钮没有数据集。modal2

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.