仅使用JAVASCRIPT单击链接或文本时显示模态

Show a modal when a link or text is clicked using JAVASCRIPT only.

本文关键字：文本 显示 模态 链接 JAVASCRIPT 单击      更新时间：2024-04-12

我一直在努力弄清楚这一点，因为我是Javascript的新手。

这是我一直在做的jsfiddle演示。

现在，如果您单击"激活模态"链接，则不会显示任何内容，但当您更改a链接代码并使用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>

您需要重写锚点的代码：

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

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

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

附言：为什么不使用jQuery？它具有非常简化的语法，更短且易于使用

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

相关文章：