单击 link 无法打开模式

Question

这是我第一次使用模态框，我在 link 单击时无法打开模态框。我在控制台中没有收到任何错误，所以我很难对此进行故障排除。

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 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);
aboutModal.addEventListener('click', closeModal);

// opens and closes modal
function openModal(){
    modal.style.display = 'block';
}
function closeModal(){
    modal.style.display = 'none';
}

有什么建议吗？

Answer 1

您的 aboutModal 有两个不同的回调 - openModal() 和 closeModal() 用于同一点击事件。当您单击 aboutModal 时，openModal() 会显示您的模态，但之后，closeModal() 会在它们都执行时隐藏它。

Answer 2

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

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

// 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 3

如果我理解正确，问题（查看您的代码）是您创建了 2 个点击侦听器，一个具有打开功能，另一个具有关闭功能。

我将修改您的代码，将功能更改为切换：

// 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 toggle Modal
aboutModal.addEventListener('click', toggleModal);

// opens and closes modal
function toggleModal(){
    modal.style.display = (modal.style.display = 'block')? 'none' : 'block';
}

Answer 4

您需要将 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 5

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

上添加 closeModal 事件函数

closeBtn.addEventListener('click', closeModal);

单击 link 无法打开模式

Modal not opening with link click

html

javascript

modal-dialog