javascript - 如果在弹出 div 内单击，弹出 div 保持打开状态

Question

如果在弹出 div 内单击，我希望弹出 div 保持打开状态，因为它包含要由用户填写的表单。这是我的代码

Javascript：

<script>
$('#btnFieldWorkers').bind("click", ToggleDisplay);
function ToggleDisplay() {
    if ($("#div_fieldWorkers").data('shown')) {
       hide();
    }
    else
       display();
 }

    function display() {
        if ($("#div_fieldWorkers").children().length > 0) {
            $("#div_fieldWorkers").fadeIn(300, function () {
                $(document).bind("click", function () { hide(); });
                $("#div_fieldWorkers").data('shown', true)
            });
        }
    }

    function hide() {
        $("#div_fieldWorkers").fadeOut(300, function () {
            $(document).unbind("click");
            $("#div_fieldWorkers").data('shown', false);
        });

    }
</script>

HTML：

<input type="button" value="Add Field Worker" id="btnFieldWorkers" onclick="return ToggleDisplay();" class="btn btn-primary" />
<div id="div_fieldWorkers" style="display:none;" class="form_size"></div>

Answer 1

当用户在叠加层内单击时，您需要停止传播：

$("#div_fieldWorkers").on('click', function(e) {
    e.stopPropagation();
});

Answer 2

工作演示

尝试这个

     $('#btnFieldWorkers').bind("click", ToggleDisplay);

function ToggleDisplay(e) {
    e.stopPropagation();
    if ($("#div_fieldWorkers").data('shown')) {
        hide();
    } else display();
}

function display() {
    if ($("#div_fieldWorkers").children().length > 0) {
        $("#div_fieldWorkers").fadeIn(300, function () {
            $("#div_fieldWorkers").data('shown', true)
        });
    }
}

function hide() {
    $("#div_fieldWorkers").fadeOut(300, function () {
        $("#div_fieldWorkers").data('shown', false);
    });

}
$('body').on('click', function (e) {
    if ($(e.target).is(' :not(#div_fieldWorkers,#div_fieldWorkers *)')) {
        hide();
    }
});

Answer 3

经过大量搜索和帮助后，我发现这是有效的：

   $("html").click(function (e) {

        if (e.target.parentElement.parentElement.parentElement == document.getElementById("div_fieldWorkers") || e.target == document.getElementById("btnFieldWorkers")) { }
        else
        {
            $("#div_fieldWorkers").slideUp("fast");
        }
    });
    function ToggleDisplay() {
        display();
    }

    function display() {

        $("#div_fieldWorkers").slideDown("fast");
    }   

Answer 4

从后面的代码中，您可以执行以下操作

 ClientScript.RegisterStartupScript(this.GetType(), "Popup", "display();", true);