javascript - 我的页面上有两个模态框，但如果在模态框之外单击，则只有第二个模态框会关闭

Question

我正在使用 w3 的 css 模态类来制作 2 个模态。它工作正常，但在实际模态窗口外部单击时，一个模态不会关闭，而另一个模态则工作正常。我有点困惑，因为它们都工作得很好，但我必须做的事情破坏了第一个。这是我的代码:

HTML:

<div class="w3-modal" id="create-store-modal">
<div class="w3-modal-content w3-card-4 w3-round" style="width: 800px;">
    <header class="w3-container w3-theme-gradient">
        <span onclick="document.getElementById('create-store-modal').style.display = 'none'" class="w3-button w3-theme-gradient w3-display-topright">&times;</span>
        <h2 class="w3-center">Create Your Store</h2>
    </header>

    <br><br>
    <div class="w3-container">
            <form method="post" id="create-store-form" enctype="multipart/form-data">
                <label for="store-name">Store Name </label>
                <input type="text" class="w3-input w3-border w3-round-large" id="store-name" name="store-name">
                <br>
                <label for="store-desc">Store Description </label>
                <input type="text" class="w3-input w3-border w3-round-large" id="store-desc" name="store-description">
                <br>
                <label for="store-category">Store Category</label>
                <select class="w3-select w3-border w3-round-large" id="store-category" name="store-categoery">
                    <?php
                        foreach ($this->categories as $value):
                    ?>
                    <option value="<?php echo $value['type']; ?>"><?php echo $value['type']; ?></option>
                    <?php endforeach; ?>
                </select>
                <br><br>
                <div class="upload-btn-wrapper">
                    <p class="w3-right-align">
                         <button class="btn">Upload Image For Store</button>
                         <input type="file" class="w3-input w3-border w3-round-large" id="store-image" name="store-image">
                    </p>
                </div>
                <br><br>
                <button type="button" name="submit" id="submit" class="w3-button w3-round-large w3-theme-gradient">Create Store</button>
            </form>
    </div>

    <br><br>
    <footer class="w3-container w3-theme-gradient">&nbsp;
           <p id="message"></p>
    </footer>

    <script type="text/javascript">
        $('#submit').on('click', function() {
            var store_name = $("#store-name").val();
            var store_desc = $("#store-desc").val();
            var store_cat = $("#store-category").val();


            var formData = new FormData();

            if (document.getElementById('store-image') == null) {
                formData.append("store-name", store_name);
                formData.append("store-desc", store_desc);
                formData.append("store-cat", store_cat);
            } else {
                formData.append("store-name", store_name);
                formData.append("store-desc", store_desc);
                formData.append("store-cat", store_cat);
                formData.append("store-image", document.getElementById('store-image').files[0]);
            }

            $.ajax({
                type: "POST",
                contentType : false,
                processData: false,
                url: "/user/make-store",
                dataType: "json",
                data: formData
            }).done(function(msg) {
                $('#store-name').val("");
                $('#store-desc').val("");
                $('#message').html("<h2 class=\"w3-center\">" + msg.success + "</h2>");
            }).fail(function(msg) {
                $('#message').html("<h2 class=\"w3-center\">" + msg.failure + "</h2>");
            });
        });
    </script>
</div>

JavaScript:

<script>
    var modal = document.getElementById('create-store-modal');

    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = 'none';
        }
    }
</script>

<script>
    var modal2 = document.getElementById('modify-store-modal');

    window.onclick = function(event) {
        if (event.target == modal2) {
            modal2.style.display = 'none';
        }
    }
</script>

另一个模态在样式和类方面是相同的，只是有一个不同的 id (modify-store-modal) 而不是 create-store-modal。这是我截取的一些屏幕截图的链接，可以更好地解释我想说的内容。

/image/yKtpB.jpg

基本上，我很困惑为什么在模式外单击时第一个不会关闭，而第二个却工作得很好。

如有任何帮助，我们将不胜感激。

谢谢!

Answer 1

当您将函数分配给 onclick 属性时，之前分配的 onclick 方法(如果有)将被删除。

window.onclick = () => console.log('foo');
window.onclick = () => console.log('bar');

onclick 实际上是一个getter/setter，它一次最多只能容纳一个点击处理程序。添加新的 onclick 处理程序时，旧的 onclick 处理程序将被删除。

使用addEventListener代替，它没有这样的限制:

window.addEventListener('click', function(event) {
  // ...

您还可以将逻辑放入单个处理程序中:

var modal = document.getElementById('create-store-modal');
var modal2 = document.getElementById('modify-store-modal');
window.addEventListener('click', function(event) {
  if (event.target === modal || event.target === modal2) {
    event.target.style.display = 'none';
  }
});