jQuery CSS Popup modal

jQuery - Popup



  
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Popup modal</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup(){
 //loads popup only if it is disabled
 if(popupStatus==0){
  $("#backgroundPopup").css({
   "opacity": "0.7"
  });
  $("#backgroundPopup").fadeIn("slow");
  $("#popupContact").fadeIn("slow");
  popupStatus = 1;
 }
}

//centering popup
function centerPopup(){
 //request data for centering
 var windowWidth = document.documentElement.clientWidth;
 var windowHeight = document.documentElement.clientHeight;
 var popupHeight = $("#popupContact").height();
 var popupWidth = $("#popupContact").width();
 //centering
 $("#popupContact").css({
  "position": "absolute",
  "top": windowHeight/2-popupHeight/2,
  "left": windowWidth/2-popupWidth/2
 });
}

//disabling popup with jQuery magic!
function disablePopup(){
 //disables popup only if it is enabled
 if(popupStatus==1){
  $("#backgroundPopup").fadeOut("slow");
  $("#popupContact").fadeOut("slow");
  popupStatus = 0;
 }
}

//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
 //LOADING POPUP
 //Click the button event!
 $("#button").click(function(){
  //centering with css
  centerPopup();
  //load popup
  loadPopup();
 });
  //CLOSING POPUP
 //Click the x event!
 $("#popupContactClose").click(function(){
  disablePopup();
 });
  //Click out event!
 $("#backgroundPopup").click(function(){
  disablePopup();
 });
  //Press Escape event!
 $(document).keypress(function(e){
  if(e.keyCode==27 && popupStatus==1){
   disablePopup();
  }
 });
});
</script>
</head>
<body>
<p><h1 align="center">jQuery Popup Modal</h1></p>
<div id="button"><input type="submit" value="PopUp!" /></div>

 <div id="popupContact">
  <a id="popupContactClose"><img src="../img/delete00.png"></a>
  <h1>Title!</h1>
  <p>Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl </p>
  <p>risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante </p>
  <p>orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla.</p>
 </div>
 <div id="backgroundPopup"></div>
<style>
body{
 background:#fff none repeat scroll 0%;
 line-height:1;
 font-size: 12px;
 font-family:arial,sans-serif;
 margin:0pt;
 height:100%;
}
a{
 cursor: pointer;
 text-decoration:none;
}
#button{
 text-align:center;
 margin:100px;
}
#backgroundPopup{
 display:none;
 position:fixed;
 height:100%;
 width:100%;
 top:0;
 left:0;
 background:#000000;
 border:1px solid #cecece;
 z-index:1;
}
#popupContact{
 display:none;
 position:fixed;
 height:300px;
 width:400px;
 background:#FFFFFF;
 border:2px solid #cecece;
 z-index:2;
 padding:12px;
 font-size:13px;
}
#popupContact h1{
 text-align:left;
 color:#6FA5FD;
 font-size:22px;
 font-weight:700;
 border-bottom:1px dotted #D3D3D3;
 padding-bottom:2px;
 margin-bottom:20px;
}
#popupContactClose{
 font-size:14px;
 line-height:14px;
 right:6px;
 top:4px;
 position:absolute;
 color:#6fa5fd;
 font-weight:700;
 display:block;
}
</style>
</body>
</html>
Labels: ,