$(function() {
    $("#btnLogin").click(function() {
        $("#loginDialog").show(500);
    });
    $(document).click(function(e) {
        e.preventDefault();
        var elem = $(e.target).attr('id');
        if ($(e.target).parents("#loginDialog").length) {
            $("#loginDialog").show();
        } else {
            if ($(e.target).attr('id') !== "btnLogin") {
                $("#loginDialog").hide(300);
            }
        }
    });
});

Setting Validate Copy Format

#loginDialog{
  border:1px solid #333;
  padding:4px;
  background:#2A2A2A;
  width:250px;
  color:#dfdfdf;
  display:none;
}
#loginDialog input{
  border:1px solid #efefef;
}
#loginDialog input[type=button]{
  background:#ababab;
}
#loginDialog input[type=button]:hover{
  background:#cfcfcf;
}
#loginDialog .field{
  text-align:center;
  margin-bottom:5px;
}
#loginDialog label{
  display:inline-block;
  width:100px;
}
a{
  display:inline-block;
  margin-left:8px;
}

Setting Validate Copy Format

<div id="loginDialog">
  <div class="field">
    <label>
      User Name 1: 
    </label>
    
    <span class="input">
      <input type="text" value="" id="txtuser" size="15"/>
      
    </span>
  </div>
  <div class="field">
    <label>
      Password: 
    </label>
    
    <span class="input">
      <input type="password" value="" id="txtpassword" size="15"/>
      
    </span>
  </div>
  <div class="field">
    <input type="button" id="btn_ok" value="Login" />
  </div>
</div>
<div>
  <a href="javascript:void(0);" id="btnLogin">
    Login
  </a>
  <a href="javascript:void(0);" id="btnMenu1">
    Menu1
  </a>
  <a href="javascript:void(0);" id="btnMenu2">
    Menu2
  </a>
</div>

Copy Format

Download