Skip to content

Instantly share code, notes, and snippets.

@ColtMoney ColtMoney/JQuery Alert Box
Last active Nov 14, 2016

Embed
What would you like to do?
$(".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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.