模式未通过链接单击打开

Question

这是我第一次使用模态框，我无法在链接点击时打开我的模态框。我在控制台中没有收到任何错误，所以我很难解决这个问题。HTML：<!--Navbar-->    <nav class="navbar">        <div class="logo">            <h4>Earthquake Feed</h4>        </div>        <ul class="nav-links">            <li><a href="#simpleModal" data-target="simpleModal" data-toggle ="simpleModal" id="aboutModal">About</a></li>            <li><a href="#">Legend</a></li>        </ul>    </nav>    <!--About Modal-->    <div id="simpleModal" class="modal">        <div class="modal-content">            <span class="closeBtn">&times;</span>            <p>Hello....I am a modal</p>        </div>    </div>Javascript：// Get about modal elementvar modal = document.getElementById('simpleModal');// get open about modal linkvar aboutModal = document.getElementById('aboutModal');// Get close buttonvar closeBtn = document.getElementsByClassName('closeBtn')[0];// listen for open/close clickaboutModal.addEventListener('click', openModal);aboutModal.addEventListener('click', closeModal);// opens and closes modalfunction openModal(){    modal.style.display = 'block';}function closeModal(){    modal.style.display = 'none';}有什么建议？

Answer 1

您将打开和关闭功能都绑定到同一个按钮。所以当你点击它时，浏览器会同时打开和关闭模态框，所以看起来什么也没发生。只需将其绑定到正确的按钮即可。

此外，为模态添加默认状态关闭。

// Get about modal element

var modal = document.getElementById('simpleModal');

// get open about modal link

var aboutModal = document.getElementById('aboutModal');

// Get close button

var closeBtn = document.getElementsByClassName('closeBtn')[0];

// listen for open/close click

aboutModal.addEventListener('click', openModal);

closeBtn.addEventListener('click', closeModal);

// opens and closes modal

function openModal(){

    modal.style.display = 'block';

}

function closeModal(){

    modal.style.display = 'none';

}

#simpleModal {

  display: none;

}

<nav class="navbar">

  <div class="logo">

    <h4>Earthquake Feed</h4>

  </div>

  <ul class="nav-links">

    <li>

      <a href="#simpleModal" data-target="simpleModal" data-toggle ="simpleModal" id="aboutModal">About</a>

    </li>

    <li>

      <a href="#">Legend</a>

    </li>

  </ul>

</nav>

<!--About Modal-->

<div id="simpleModal" class="modal">

  <div class="modal-content">

    <span class="closeBtn">&times;</span>

    <p>Hello....I am a modal</p>

  </div>

</div>

Answer 2

您需要添加openModal()到aboutModal和您closeModal的点击处理程序到closeBtn. 通过将这两个都添加到aboutModal这两个都被调用。单击首先aboutModal执行，openModal()然后立即执行closeModal。见片段。

// Get about modal element

var modal = document.getElementById('simpleModal');

// get open about modal link

var aboutModal = document.getElementById('aboutModal');

// Get close button

var closeBtn = document.getElementsByClassName('closeBtn')[0];

// listen for open/close click

aboutModal.addEventListener('click', openModal);

closeBtn.addEventListener('click', closeModal);

// opens and closes modal

function openModal() {

  modal.style.display = 'block';

}

function closeModal() {

  modal.style.display = 'none';

}

document.addEventListener('DOMContentLoaded', () => {

  modal.style.display = 'none'

})

<nav class="navbar">

  <div class="logo">

    <h4>Earthquake Feed</h4>

  </div>

  <ul class="nav-links">

    <li><a href="#simpleModal" data-target="simpleModal" data-toggle="simpleModal" id="aboutModal">About</a></li>

    <li><a href="#">Legend</a></li>

  </ul>

</nav>

<!--About Modal-->

<div id="simpleModal" class="modal">

  <div class="modal-content">

    <span class="closeBtn">&times;</span>

    <p>Hello....I am a modal</p>

  </div>

</div>

Answer 3

您在 上添加了打开和关闭click事件aboutModal，因此关闭模态的函数超过了打开模态的函数所做的工作。
您需要closeModal在closeBtn.

closeBtn.addEventListener('click', closeModal);