Simple popup window using HTML CSS & JavaScript

Here's the code snippet:



<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popups by roundCube</title>

  <!--[if lt IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.js"></script>
  <![endif]-->
  <style>
  #popUp{
  position:absolute;
  height:50%;
  width:70%;
  left:15%;
  top:25%;
  background-color:black;
  z-index:0;
  opacity:0;
  -webkit-transition:all 1.5s ease;
  -moz-transition:all 1.5s ease 0s;


  }

  </style>

  <script>
  function popUpAppear() {

  var popUp = document.getElementById("popUp");

  if(popUp.style.opacity!="1" && popUp.style.opacity!="0.001")
  {
  popUp.style.opacity="0.001";
  popUp.style.zIndex=500;


  }
  else if( popUp.style.opacity!="0.002" )
  {
popUp.style.opacity="1";




  }


  setTimeout("popUpAppear()",5000);//5000 is the time in milliseconds
}



  </script>



  </head>


  <body onload="popUpAppear()">
  <a href="https://www.facebook.com/roundCubeInc?fref=ts"><div id="popUp"></div></a>

  </body>
  </html>



Feel free to ask for snippets in the comments below or our facebook page
https://www.facebook.com/roundCubeInc

0 comments: