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。这是我拍摄的一些屏幕截图的链接，可以更好地解释我要说的话。

https://imgur.com/a/BSVpZ7H

基本上，我对为什么在模态外部单击时第一个无法关闭而第二个仍能正常工作感到困惑。

任何帮助将不胜感激。

谢谢！

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';
  }
});

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

1 个答案: