07/11/15

Home » » Simple Jquery Onload Popup

Simple Jquery Onload Popup

By No comments
Pada artikel ini akan di berikan contoh pembuatan popup saat membuka halaman blog atau website. Popup bisa berupa form, iklan, pesan, dll. Anda bisa merubah kode html dan css dibawah ini sesuai dengan kebutuhan.
Demo

Kode HTML 

<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
<title></title>
<link href="search.css" rel="stylesheet" type="text/css">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Live Demo :: Onload popup using jquery,javascript,css,html</title>
<link href="popup.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <script>
      // you can use just jquery for this
      $(document).ready(function(){
         $('#overlay-back').fadeIn(500,function(){
            $('#popup').show();
         });
 
         $(".close-image").on('click', function() {
            $('#popup').hide();
            $('#overlay-back').fadeOut(500);
         });
      });
   </script>
<br />
<center><h1>Live Demo :: Onload Popup Menggunakan Jquery</h1>
<br /><br /><br /><br />
<a href="/viantdblog/popup.php">Reload Page</a>
</center>
<div id="overlay-back"></div>
<div id="popup">
<img src="Deep_Close.png" class="close-image" />
<h1>Hello</h1>
<h3>Selamat Datang di Demo Popup!</h3>
<p>
Anda dapat mengganti popup ini dengan pesan, form, gambar, iklan, dll. Dapatkan tips tentang website dan blogger pada halaman viantd.blogspsot.com. Blog ini saya buat sebagai notebook saya sendiri dan mungkin bermanfaat bagi yang lain. Saya bukan programer web atau blog, semua kode saya dapatkan dari website atau blogger lain yang ada di internet</p>
<a href="http://viantd.blogspot.com">Read More</a>
</div>
</body>
</html>

Kode CSS

body
{
background-image:url(code.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
a{
text-decoration:none;
font-size:18px;
color:#333333;
}
a:hover{
text-decoration:underline;
font-size:18px;
color:#333333;
}
#popup{
position:absolute;
display:hidden;
top:160px;
left:50%;
width:500px;
height:auto;
margin-left:-250px;
background-color:white;
z-index:6;
padding:20px;
border:solid 5px #333333;
border-radius:5px;
}
#popup h1{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
color:#3F5C9A;
border-bottom:1px #3F5C9A solid;
margin:0;
padding:0;
}
#popup h3{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color:#666666;
margin:0;
padding:5px 0;
text-align:left;
}
#popup p{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#666666;
margin:0;
padding:5px;
text-align:justify;
}
#popup a{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#666666;
margin:0;
padding:5px;
text-align:right;
float:right;
}
#overlay-back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 5;
display: none
}
.close-image{
display: block;
float:right;
position:relative;
top:-15px;
right: -15px;
height: 20px;
cursor:pointer;
}

0 komentar:

Posting Komentar