开闭模式

Question

我创建了一个想要单击按钮即可打开/关闭的模式，但是，似乎存在一个问题，即有时它可以工作，而大多数时候却不起作用。

根据我在下面添加的代码，它在这里运行良好。但是，当我将其添加到我的网站时，它似乎对我不起作用。

Maximizemedia.co.uk

document.getElementById('button').addEventListener("click", function() {
	document.querySelector('.bg-modal').style.display = "flex";
});

document.querySelector('.close').addEventListener("click", function() {
	document.querySelector('.bg-modal').style.display = "none";
});

.bg-modal {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.93);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}

.modal-content {
    width: 400px;
    height: 400px;
}

.modal-content input,
textarea,
.modal-content a {
    display: block;
    width: 100%;
    margin: 15px auto;
}


.close {
    font-size: 40px;
    color: #fff;
    transform: rotate(45deg);
    position: absolute;
    right: 20px;
    top: 0px;
    cursor: pointer;
}

<a href="#" id="button" class="button">click me</a>

 <div class="bg-modal">
        <div class="modal-content">
            <div class="close">+</div>
            <form action="">
                <input type="text" placeholder="name">
                <input type="text" placeholder="email">
                <input type="text" placeholder="phone number">
                <textarea name="comment" id="" cols="30" rows="10">What would you like to chat to me about?</textarea>
                <a class="button">Send message</a>
            </form>
        </div>
    </div>

Answer 1

您的脚本在页面加载之前执行，因此angular为空。尝试将document.getElementById('button')标记移到<script>元素的末尾。

Answer 2

这三段代码是全部在一个HTML文件中还是在3个单独的文件中？

如果答案是（a）它们都在同一个HTML文件中，则请参阅Iso的答案-JavaScript必须在浏览器解析HTML之后运行。

但是，有时 起作用（尤其是在您的本地计算机上）的事实表明，您实际上有3个单独的文件：脚本文件，HTML文件和CSS文件。在localhost上，浏览器发送每个文件的请求到它们到达之间几乎没有延迟。这意味着在JavaScript运行时，浏览器已经解析了DOM（由HTML指定的文档对象模型），因此所有操作都如您所愿。

但是，当您通过网络加载该文件（将其放在您的网站上）时，每个文件都需要更长的时间才能到达浏览器，并且有可能在JavaScript运行时文档对象模型尚未完成加载-这将导致就像Iso所说的document.getElementById('button')为空。

如果您使用的是jQuery，请将您的代码放入$(document).ready()中，该代码将等待DOM准备就绪后再运行。像这样：

$(document).ready(function() {
    document.getElementById('button').addEventListener("click", function() {
        document.querySelector('.bg-modal').style.display = "flex";
    });

    document.querySelector('.close').addEventListener("click", function() {
        document.querySelector('.bg-modal').style.display = "none";
    });
});

如果您不使用jQuery，则将代码放在$( window ).on('load')中，如下所示：

$(window).on('load', function() {
    document.getElementById('button').addEventListener("click", function() {
        document.querySelector('.bg-modal').style.display = "flex";
    });

    document.querySelector('.close').addEventListener("click", function() {
        document.querySelector('.bg-modal').style.display = "none";
    });
});

但是请记住，如果使用jQuery，则第二种方法不是最优的，因为它将在运行代码之前一直等到一切加载完毕（包括所有图像等），因此如果用户的互联网连接速度较慢，点击处理程序可能需要几秒钟才能注册。 jQuery方法将在DOM准备就绪后运行代码，但不会等待所有图像等也加载完毕-因此单击处理程序的注册速度更快。