模式未通过链接单击打开

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

您将打开和关闭功能都绑定到同一个按钮。所以当你点击它时，浏览器会同时打开和关闭模态框，所以看起来什么也没发生。只需将其绑定到正确的按钮即可。此外，为模态添加默认状态关闭。// 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);closeBtn.addEventListener('click', closeModal);// opens and closes modalfunction openModal(){&nbsp; &nbsp; modal.style.display = 'block';}function closeModal(){&nbsp; &nbsp; modal.style.display = 'none';}#simpleModal {&nbsp; display: none;}<nav class="navbar">&nbsp; <div class="logo">&nbsp; &nbsp; <h4>Earthquake Feed</h4>&nbsp; </div>&nbsp; <ul class="nav-links">&nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; <a href="#simpleModal" data-target="simpleModal" data-toggle ="simpleModal" id="aboutModal">About</a>&nbsp; &nbsp; </li>&nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; <a href="#">Legend</a>&nbsp; &nbsp; </li>&nbsp; </ul></nav><!--About Modal--><div id="simpleModal" class="modal">&nbsp; <div class="modal-content">&nbsp; &nbsp; <span class="closeBtn">&times;</span>&nbsp; &nbsp; <p>Hello....I am a modal</p>&nbsp; </div></div>

Answer 2

您需要添加openModal()到aboutModal和您closeModal的点击处理程序到closeBtn. 通过将这两个都添加到aboutModal这两个都被调用。单击首先aboutModal执行，openModal()然后立即执行closeModal。见片段。// 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);closeBtn.addEventListener('click', closeModal);// opens and closes modalfunction openModal() {&nbsp; modal.style.display = 'block';}function closeModal() {&nbsp; modal.style.display = 'none';}document.addEventListener('DOMContentLoaded', () => {&nbsp; modal.style.display = 'none'})<nav class="navbar">&nbsp; <div class="logo">&nbsp; &nbsp; <h4>Earthquake Feed</h4>&nbsp; </div>&nbsp; <ul class="nav-links">&nbsp; &nbsp; <li><a href="#simpleModal" data-target="simpleModal" data-toggle="simpleModal" id="aboutModal">About</a></li>&nbsp; &nbsp; <li><a href="#">Legend</a></li>&nbsp; </ul></nav><!--About Modal--><div id="simpleModal" class="modal">&nbsp; <div class="modal-content">&nbsp; &nbsp; <span class="closeBtn">&times;</span>&nbsp; &nbsp; <p>Hello....I am a modal</p>&nbsp; </div></div>

Answer 3

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