Home/ Questions/Q 8047445
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T06:06:00+00:00

Here is what my team member was looking for: How to provide a functionality

  • 0

Here is what my team member was looking for: How to provide a functionality like GMail where you click on your email and it opens up Logout div with some additional user information and when you click anywhere outside of document it closes that box (hides the div)?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It can be achieved using following code:

    HTML:

    <a href="#" id="show-card">Dharmavir</a>
<div id="user-card" style="display:none">
    <p>
        Welcome Dharmavir,<br />
        ABC Software, Inc
    </p>
    <a href="#">Logout</a>
<div>

    Javascript:

    $(document).ready(function(){
    // To show user-box
    $("#show-card").mouseup(function(){
        $("#user-card").show();

        // To hide user-box
        $(document).mousedown(function(){
            $("#user-card").hide();
            $(this).unbind("mousedown");
        })
    });
});

    CSS:

    #user-card {
    height:75px;
    width:200px;
    border:solid 1px #ccc;
}

    JSFiddle for the same can be seen at http://jsfiddle.net/dharmavir/tPdsE/

    • 0