Membuat Popup Box

Membuat Popup Box. Pada kesempatan ini saya akan menjelaskan trik untuk mempercantik blog sobat dengan jquery, walaupun terdengar malas untuk berhubungan dengan jquery tetapi tidak ada salahnya sobat mengetahui tentang trik ini karena trik ini cukup bagus untuk mempercantik blog sobat . Dengan trik ini, blog sobat bisa terlihat profesional dan elegant. Tetapi sebelumnya apakah sobat sudah mengetahui maksud dari popup box ini? susah saya menjelaskannya karena saya tidak terlalu menguasai trik ini. Lebih baik sobat lihat contohnya disini.

Sebenarnya saya juga menggunakan trik ini untuk melengkapi kecantikan blog ini biar menarik gytu namun popup box di blog saya ini tersembunyi (padahal tinggal klik Contact Us sudah kelihatan). oke dari pada panjang lebar saya ngocehnya lebih baik kita lihat langkah demi langkah untuk Membuat Popup Box ini.

1. Seperti biasa login ke blogger dengan ID sobat
2. Masuk ke Tata Letak => Edit HTML
3. setelah itu cari kode </head> lalu taruh kode di bawah ini tepat di atasnya (Catatan : kalau sudah mempunyai kode di bawah ini, tidak usah di tambahkan lagi)
   
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
   
   
4. Setelah itu masukan kode di bawah ini tepat di bawah kode di atas
   
   
   <script type='text/javascript'>
   //<![CDATA[
   
   /***************************/
   //@Author: Adrian "yEnS" Mato Gondelle
   //@website: www.yensdesign.com
   //@email: yensamg@gmail.com
   //@license: Feel free to use it, but keep this credits please!
   /***************************/
   
   //SETTING UP OUR POPUP
   //0 means disabled; 1 means enabled;
   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;
   }
   }
   
   //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;
   }
   }
   
   //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
   });
   //only need force for IE6
   
   $("#backgroundPopup").css({
   "height": windowHeight
   });
   
   }
   
   
   //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>
   
   <style type='text/css'>
   #backgroundPopup{
   display:none;
   position:fixed;
   _position:absolute; /* hack for internet explorer 6*/
   height:100%;
   width:100%;
   top:0;
   left:0;
   background:#000000;
   border:1px solid #cecece;
   z-index:1;
   }
   #popupContact{
   display:none;
   position:fixed;
   _position:absolute; /* hack for internet explorer 6*/
   height:500px;
   width:510px;
   background:#FFFFFF;
   border:2px solid #cecece;
   z-index:2;
   padding:12px;
   font-size:13px;
   }
   #popupContactClose{
   font-size:14px;
   line-height:14px;
   right:6px;
   top:4px;
   position:absolute;
   color:#6fa5fd;
   font-weight:700;
   display:block;
   }
   #button{
   text-align:center;
   }
   </style>
   
   
   
5. Setelah itu simpan deh
6. nah agar Popup Boxnya bekerja, maka sobat harus memakai kode di bawah ini
   
   <a id='button'>Nama Tombol Popup Box</a>
   <div id='popupContact'>
   
   <a id='popupContactClose'>X</a>
   
   <p id='contactArea'>
   
   Script/kode yang kan muncul di popup box
   
   </p>
   </div>
   
   <div id='backgroundPopup'/>
   
   
7. Selesai

Sedikit tips dari saya, kalau sobat ingin menggunakan popup box namun tidak pada link, sobat tinggalkan masukan id="button" pada HTML, karena itu dapat memanggil script dan css popup box. Sekian dari saya Terima kasih dan Happy blogging.

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg