Show/hide popup div by clicking on same button

Question

I want to show popup div by clicking on button and then i want to hide same div by clicking on the same button. I want to hide div even when user clicks outside the div.

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

this is my div.. it contains a form to be filled by the user.

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

This is the button. help me do this using jquery

you can take help of jquery for this. And you can also use FancyBox for this, a better way of displaying Div in popup when nice features — Kamran Ajmal, Sep 30 '13 at 08:22
Your correct in saying this is my div, this is my button. Nothing there, I expect no code to be there either. — Philip Gullick, Sep 30 '13 at 08:22
tagging c# or asp.net is wrong. what you need is javascript or a javascript liberary like jquery. — Soosh, Sep 30 '13 at 08:22
are you trying to implement some kind of notification bar/message? then check out the noty plugin. https://github.com/needim/noty‎ — Vishal Vaishya, Sep 30 '13 at 08:25

score 0 · Accepted Answer · answered Sep 30 '13 at 08:24

0

<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>

answered Sep 30 '13 at 08:24

Amitkumar Arora

149
2

code is working.. but i want to hide div even when user clicks anywhere outside the div – Manu Sep 30 '13 at 09:40
on blur event you can call the function – Amitkumar Arora Sep 30 '13 at 09:44

Vishal Vaishya · Answer 2 · 2013-09-30T08:52:46.420

Check if this code works for you:

Style:

    #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 Code:

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

Java Script:

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

Use displayNotification('Message'); to show div and clearMessages() to hide this div.

No I guess. I think either toggle works for targeted element or we can toggle between two elements. — Vishal Vaishya, Sep 30 '13 at 10:47
Please answer this question http://stackoverflow.com/questions/19092433/close-popup-div-when-clicked-outside — Manu, Sep 30 '13 at 10:56

Show/hide popup div by clicking on same button

2 Answers2