定义变量时出现“意外的变量”错误

"Unexpected var" error while defining variable

本文关键字：变量 意外的变量 错误 意外 定义      更新时间：2023-09-26

我创建了一个非常简单的弹出窗口/模态框。我想在单击按钮后显示它.openModal并通过单击.closeModal或屏幕上的任何地方来关闭它。问题是我无法定义显示模态是打开（真）还是关闭（假）的变量。

问题出在哪里？

<div class="modal"></div>
   <div class="modalContent">
   <span class="closeModal">x</span>
   </div>
    <script>
        var openModal = false;
        $(".openModal").click(function(){
            $(".modal").show();
            $(".modalContent").show();
             openModal = true;
        })
         $(".closeModal").on('click', function(){
            $(".modal").hide();
            $(".modalContent").hide();
             openModal = false;
        })
        $("body").on('click', function(){
        if(openModal){
            $(".modal").hide();
            $(".modalContent").hide();
        }
        })
    </script>

我终于这样解决了：

<div class="modal"></div>
<div class="modalContent">
<span class="closeModal">x</span>
</div>
            var openModal = false;
            $("body").on('click','.modal', function(){
                    if(openModal === true){
                        $(".modal").hide();
                        $(".modalContent").hide();
                    }
            });
            $("body").on('click', '.openModal', function(){
                $(".modal").show();
                $(".modalContent").show();
                 openModal = true;       
            });
             $('body').on('click',".closeModal", function(){
                $(".modal").hide();
                $(".modalContent").hide();
                 openModal = false;
            });

.modal是弹出窗口打开时出现的灰色背景，并且它是全屏的，因此单击它的工作方式与单击正文相同。似乎无法单击正文元素，就像它在后面一样。我不确定

为变量检查创建一个函数：

function checkOpen() {
    if (!openModal) {
        $(".modal").hide();
        $(".modalContent").hide();
    }
}

然后在修改模态时调用它：

$(".openModal").click(function(){
    $(".modal").show();
    $(".modalContent").show();
    openModal = true;
    checkOpen();
})
您可以在

.modal中使用data-*属性：

<div class="modal" data-open='false'></div>

然后在JS中更新它：

$(".openModal").click(function(){
    $(".modal").show();
    $(".modalContent").show();
    $(".modal").data('open', true);
})
$(".closeModal").on('click', function(){
    $(".modal").hide();
    $(".modalContent").hide();
    $(".modal").data('open', false);
})
$("body").on('click', function(){
    if($(".modal").data('open')){
        $(".modal").hide();
        $(".modalContent").hide();
    }
})

希望这有帮助。

相关文章：