Sunday, March 22, 2015

Creating 3D popup boxes using html css and javascript



HTML Code

<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Dialog box Example</title>
</head>

<body>
<div class="wrapper">
 <div class="fl-dialog">
  <dialog id="window">
        <button id="exit">X</button>
   <h3>About fastlearning.in</h3>
   <p>We started this site with clear mission that we want to deliver complete details knowledge of Programming to our audience. We are sharing this knowledge in all areas that you can see in our site.
<br/><br/>
Today we are trying to expand this thing in all educational area on our site not limited to programming. I hope we can deliver this mission completely to our audience. From Here you can start to prepare for many exams related to india's educations. We will try our best to expand this thing all over the world and for that we need our audience help also.
<br/><br/>
So those people who are interested than they can contact us. We are welcoming those people and you will get benefit of it also.</p>
   
  </dialog>
  <button id="show">Show Dialog</button>
 </div>
</div>

<script type="text/javascript">
(function() {
    var dialog = document.getElementById('window');
 document.getElementById('show').onclick = function() {
  dialog.show();
 };
 document.getElementById('exit').onclick = function() {
  dialog.close();
 };
})();

</script>

</body>
</html>

CSS Code

html {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    -ms-text-size-adjust: 100%; 
    -webkit-text-size-adjust: 100%; 
}
body {
    margin: 0;
}

svg:not(:root) {
    overflow: hidden;
}
button {
    font-family: inherit; 
    font-size: 100%; 
    margin: 0; 
}
body {
 background-color: #f3f3f3;
}
.fl-dialog {
 width: 300px;
 margin: 0 auto;
 border-radius: 3px;
 margin-bottom: 20px;
}
.fl-dialog dialog {
 width: 500px;
  background: #fff;
  color:#777;
  border: 5px solid rgba(255,255,255,1);
-webkit-box-shadow: rgb(187, 187, 187) 0px 1px 0px,
  rgb(181, 181, 181) 0px 2px 0px,
  rgb(172, 172, 172) 0px 3px 0px,
  rgb(160, 160, 160) 0px 4px 0px,
  rgb(145, 145, 145) 0px 5px 0px,
  rgb(1, 127, 127) 0px 6px 0px,
  rgba(0, 0, 0, 0.199219) 0px 7px 1px,
  rgba(0, 0, 0, 0.296875) 0px 8px 6px;
-moz-box-shadow: rgb(187, 187, 187) 0px 1px 0px,
  rgb(181, 181, 181) 0px 2px 0px,
  rgb(172, 172, 172) 0px 3px 0px,
  rgb(160, 160, 160) 0px 4px 0px,
  rgb(145, 145, 145) 0px 5px 0px,
  rgb(1, 127, 127) 0px 6px 0px,
  rgba(0, 0, 0, 0.199219) 0px 7px 1px,
  rgba(0, 0, 0, 0.296875) 0px 8px 6px;
box-shadow:rgb(187, 187, 187) 0px 1px 0px,
  rgb(181, 181, 181) 0px 2px 0px,
  rgb(172, 172, 172) 0px 3px 0px,
  rgb(160, 160, 160) 0px 4px 0px,
  rgb(145, 145, 145) 0px 5px 0px,
  rgb(1, 127, 127) 0px 6px 0px,
  rgba(0, 0, 0, 0.199219) 0px 7px 1px,
  rgba(0, 0, 0, 0.296875) 0px 8px 6px;
  border-radius: 3px;
  margin-top:8%;
}
#show {
 background-color:#005580;
 border-radius: 3px;
 color: #fff;
 border-width: 0;
 width: 200px;
 height: 50px;
 float:left;
 cursor:pointer;
}

#fl-white {
 margin-left:30%;
 margin-top:15%;
 float:left;
}

#fl-line {
 margin-left:33%;
 float:left;
}

#exit {
 background-color: #c0392b;
 border-radius: 1000px;
 color: #fff;
 float:right;
 border:none;
 cursor:pointer;
}
#show:hover {
 background-color: #2f364a;
}
#exit:hover {
 background-color: #e74c3c;
}
.fl-dialog dialog::backdrop {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.8);
}


0 comments:


Post a Comment