JQuery Alert Box

$(".btn_alert").click(function(){
    var whitebg = document.getElementById("white_background");
    var dlg = document.getElementById("dlgbox");
    whitebg.style.display = "none";
    dlg.style.display = "none";

    setTimeout(function() {
      $.fancybox.close();
    }, 1000);
  }); 


  $("form").submit(function() {
    $.ajax({
      type: "GET",
      url: "mail.php",
      data: $("form").serialize()
    }).done(function() {
      var whitebg = document.getElementById("white_background");
      var dlg = document.getElementById("dlgbox");
      whitebg.style.display = "block";
      dlg.style.display = "block";

      var winWidth = window.innerWidth;
      var winHeight = window.innerHeight;

      dlg.style.left = (winWidth/2) - 315/2 + "px";
      dlg.style.top = "150px";
      
    });
    return false;
  });
  
  
  <div id="white_background"></div>
	<div id="dlgbox">
		<div id="dlg_body">Kidly log in to continue</div>
		<div id="dlg_footer">
			<button class="btn_alert">Log in</button>
		</div>
	</div>


#white_background{
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	background-color: #fefefe;
	opacity: 0.7;
	z-index: 9999;
}
#dlgbox{
	display: none;
	position: fixed;
	width: 480px;
	z-index: 9999;
	border-radius: 10px;
	background-color: #7c7d7e;
}
#dlg_body{
        background-color: #fff;
	color: #000;
	font-size: 14px;
	padding: 10px;
	margin: 0px 10px 0px 10px;
}
#dlg_footer{
	background-color: #f2f2f2;
	text-align: right;
	padding: 10px;
	margin: 0px 10px 10px 10px;
}
#dlg_footer button{
	background-color: #6d84b4;
	color: #fff;
	padding: 5px;
	border: 0px;
}