Hallo! Selamat Datang di Marketplace produk digital, Freelancer terbaik di indonesia (67564 Members, 783 Products, 5294 Topic, 12958 Comments)

Membuat Pop Up Saat website swarakalibata dibuka.

Dibuat
Login Terakhir 1 Tahun lalu,
Telah Dilihat 4496 Kali
Hafid Armi Mengatakan : Sultan Account 
  1. Permisi mas Robby..bagaimana caranya membuat Pop Up Saat website swarakalibata dibuka.?terima kasih
Ada 1 File Kiriman :
1. popup.png (1 MB)

Ada 4 Jawaban

PHPMU.COM Support
commented on 31 Jan 2018 10:20:53		 
  1. Assalam, berikut ini :
  2.  
  3. 1. Sisipkan script HTML berikut di dalam tag <body> pada "application/views/phpmu-tigo/template.php" :
  4. <div id="boxes">
  5.   <div id="dialog" class="window">
  6.     <center>
  7.       <div class='fb-page' data-href='https://www.facebook.com/pehapemu/' data-tabs='timeline' data-width='500' data-height='355' data-small-header='false' data-adapt-container-width='true' data-hide-cover='false' data-show-facepile='true'><blockquote cite='https://www.facebook.com/pehapemu/' class='fb-xfbml-parse-ignore'><a href='https://www.facebook.com/pehapemu/'>phpmu.com</a></blockquote></div>
  8.     </center><br>
  9.   </div>
  10.   <div id="mask"></div>
  11. </div>
  12.  
  13. 2. Untuk script js sisipkan di dalam tag <head> :
  14. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
  15. <script type="text/javascript">
  16. 	$(document).ready(function() {	
  17. 	var id = '#dialog';
  18.  
  19. 	//Get the screen height and width
  20. 	var maskHeight = $(document).height();
  21. 	var maskWidth = $(window).width();
  22.  
  23. 	//Set heigth and width to mask to fill up the whole screen
  24. 	$('#mask').css({'width':maskWidth,'height':maskHeight});
  25.  
  26. 	//transition effect
  27. 	$('#mask').fadeIn(500);	
  28. 	$('#mask').fadeTo("slow",0.9);	
  29.  
  30. 	//Get the window height and width
  31. 	var winH = $(window).height();
  32. 	var winW = $(window).width();
  33.  
  34. 	//Set the popup window to center
  35. 	$(id).css('top',  winH/2-$(id).height()/2);
  36. 	$(id).css('left', winW/2-$(id).width()/2);
  37.  
  38. 	//transition effect
  39. 	$(id).fadeIn(2000); 	
  40.  
  41. 	//if close button is clicked
  42. 	$('.window .close').click(function (e) {
  43. 	//Cancel the link behavior
  44. 	e.preventDefault();
  45.  
  46. 	$('#mask').hide();
  47. 	$('.window').hide();
  48. 	});
  49.  
  50. 	//if mask is clicked
  51. 	$('#mask').click(function () {
  52. 	$(this).hide();
  53. 	$('.window').hide();
  54. 	});
  55.  
  56. 	});
  57. </script>
  58.  
  59. 3. Ini untuk css nya, sisispkan di dalam tag <head> juga :
  60. <style type="text/css">
  61. #mask {
  62.   position: absolute;
  63.   left: 0;
  64.   top: 0;
  65.   z-index: 9000;
  66.   background-color: #000;
  67.   display: none;
  68. }
  69.  
  70. #boxes .window {
  71.   position: absolute;
  72.   left: 0;
  73.   top: 0;
  74.   width: 440px;
  75.   height: 200px;
  76.   display: none;
  77.   z-index: 9999;
  78.   padding: 20px;
  79.   border-radius: 15px;
  80.   text-align: center;
  81. }
  82.  
  83. #boxes #dialog {
  84.   width: 500px;
  85.   height: 355px;
  86.   padding: 10px;
  87.   background-color: #ffffff;
  88.   font-family: 'Segoe UI Light', sans-serif;
  89.   font-size: 15pt;
  90. }
  91.  
  92. #popupfoot {
  93.   font-size: 16pt;
  94.   position: absolute;
  95.   bottom: 0px;
  96.   width: 250px;
  97.   left: 250px;
  98. }
  99. </style>
  100.  
  101. Hasilnya dari yang sudah kita cobakan disini bisa dilihat dari lampiran dibawah ini,..
Terdapat 1 File dilampirkan :
1. popup_saat_buka_web.png (374 KB)
Hafid Armi
commented on 31 Jan 2018 11:23:22		 
  1. Seandainya unyuk menu pop up berupa gambar bagaimana mas?Apakah bisa..
PHPMU.COM Support
commented on 01 Feb 2018 07:07:26		 
  1. bisa mas, itu kan tinggal ganti saja Fanpage pada script html menjadi image, seperti ini :
  2. <div id="boxes">
  3.   <div id="dialog" class="window">
  4.     <center>
  5.       <img src='gambar.jpg'>
  6.     </center><br>
  7.   </div>
  8.   <div id="mask"></div>
  9. </div>
Hafid Armi
commented on 01 Feb 2018 10:29:58		 
  1. Terima kasih mas..
  2. Mas,saya ada inbox mas Robby..
Maaf, Untuk Memberikan Komentar Anda Harus Login !!!

CV Asktech Indonesia

Cari Produk Digital, Freelancer Terbaik dan Terpercaya di Indonesia

CV Asktech Indonesia
Jl. Angkasa Puri, Perundam V, Tunggul Hitam
Padang 25176 - Indonesia

Telp./Fax. (0751) 461695
Phone/WA. +62-812-6777-1344
E-mail robby.prihandaya@gmail.com

Tentang Kami

Jam Layanan

  • Senin - Jum'at: 09:00 - 17:00 WIB
  • Sabtu - Minggu: 09:00 - 15:00 WIB

Knowledgebase