首页 > 解决方案 > jQuery在尝试单击任意位置时关闭模式

问题描述

jQuery 显示出不可预知的行为,以下代码显示了一个自定义模式,其中包含一个表单,但是如果我尝试单击任意位置,包括表单输入,它会调用 jQuery 函数并关闭它。我可能做错了什么?

let fecharModal = $('#fecharModal');
let conteudoModal = $('#conteudoModal');
let modal = $('#modal');
let fora = $('#fora');

$(modal).on('click', [fecharModal, fora], function () {
        $(modal).hide();
        $(conteudoModal).html("");
        return false;
    });

        <div id="modal" class="fixed z-10 inset-0 overflow-y-auto hidden">
            <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                <div id="fora" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
                <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
                <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                    <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                        <div class="sm:flex sm:items-start">
                            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left" id="conteudoModal">
                            </div>
                        </div>
                    </div>        
                </div>
            </div>
        </div>

标签: jquerydjangotoggletailwind-csssimplemodal

解决方案


推荐阅读