Question

我一直试图解决这个问题，因为在Javascript方面我是一个菜鸟。

这是我一直在努力的jsfiddle demo。

现在，如果您单击“激活模态”链接，则尚未显示任何内容，但是当您更改链接代码并使用href =“＃modal”时，模式/弹出窗口将显示。现在，我想要做的是在不使用链接的情况下显示模态，是否可以只单击一个单词并使用onClick事件？你能指导我一下它是如何工作的吗？

这是模态代码：

 <div id="modal">
    <div class="modal-content">
        <div class="headerarticle">

            <a href="#" class="btn">X</a>

            <h2>Learn</h2>
        </div>
        <div class="copy">
            <div class="article-image"><img src="images/slow-moving-stock.png"></div>
            <div class="article-word">autem</div>
            <div class="article-def">Nam a justo vulputate, interdum quam nec, auctor turpis. Nulla dapibus, lectus a aliquet lacinia, turpis dui feugiat dolor</div>
            <div class="article-samp">Donec faucibus pulvinar magna, vel convallis ipsum interdum at.</div>
        </div>
    </div>
    <div class="overlay"></div>
</div>

Answer 1

您需要重写锚点的代码：

<a href="#" onclick="showModal();return false;" class="btn go">

然后你需要更新你的js文件中的 showModal 函数：

function showModal(){
    var modal = document.getElementById('modal');
    modal.style.display = 'block';
}

P.S。为什么你不使用jQuery？它具有非常简化的语法，更短且易于使用

p.p.s.您可以在几乎所有地方使用onclick，但以下标记除外：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, <title>

仅在使用JAVASCRIPT单击链接或文本时显示模式。

1 个答案: