jquery - 通过单击相同的按钮显示/隐藏弹出 div

Question

我想通过单击按钮来显示弹出 div，然后我想通过单击相同的按钮来隐藏相同的 div。即使用户在 div 之外单击，我也想隐藏 div。

<div id="div_fieldWorkers" class="form_size"></div>

这是我的 div .. 它包含一个由用户填写的表格。

<input
    type="button"
    value="Add Field Worker"
    id="btnFieldWorkers"
    class="btn btn-primary" />

这是按钮。帮我用jquery做到这一点

Answer 1

<a href="javascript:hideshow(document.getElementById('adiv'))">Click here</a>

<script type="text/javascript">
function hideshow(which){
if (!document.getElementById)
return
if (which.style.display=="block")
which.style.display="none"
else
which.style.display="block"
}
</script>

<div id="adiv" style="font:24px bold; display: block">Now you see me</div>

Answer 2

检查此代码是否适合您：

风格：

    #messagewrapper
    {
        position: fixed;

        bottom: 10px;
        right: 10px;
        z-index: 1000;
        margin: 5px auto;
        width: auto;
    }

    #messagewrapper .messagebox
    {
        padding: 6px 5px 5px 6px;
        box-shadow: 5px 5px 10px #000;
    }

HTML 代码：

<div id="messagewrapper" style="display: none">     
</div>

Java 脚本：

function displayNotification(message) {
    $("#messagewrapper").html('<div class="messagebox"></div>');
    $("#messagewrapper .messagebox").text(message);
    displayMessages();
}

function displayMessages() {
    if ($("#messagewrapper").children().length > 0) {
        $("#messagewrapper").show();
        $(document).click(function() {
            clearMessages();
        });
    }
    else {
        $("#messagewrapper").hide();
    }
}

function clearMessages() {
    $("#messagewrapper").fadeOut(500, function() {
        $("#messagewrapper").empty();
    });
}

用于displayNotification('Message');显示 div 和clearMessages()隐藏此 div。