Pop-Up Window on Page Load jQuery

Pernahkan teman-teman menjumpai perilaku dari sebuah halaman web, pada saat kali pertama di buka akan ditampilkan sebuah window baru atau lebih dikenal dengan istilah pop-up. Pada kesempatakan kali ini kita akan mencoba membuat teknik Pop-Up dengan menggunakan jQuery.

Kalian sudah siap ya, yang pertama adalah kalian harus tahu cara kerja dari library jQuery. Untuk teknik yang akan kita buat nanti skrip untuk aktivasi sudah dibuat, jadi tinggal disisipkan saja.

Untuk hasil jadinya akan terlihat seperti berikut:

untuk skripnya, dapat dilihat disini:

<title>Pop-Up Window on Page Load jQuery | Kursus Web YELLOWWEB</title>

	<!-- Main CSS -->
	<link rel="stylesheet" type="text/css" href="pop.css">
	
	<!-- Font Awesome (Optional) -->
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">

skrip diatas adalah skrip yang kalian akan tulis pada bagian tag head, disana terdapat link yang mengarah ke file .css

@import url('https://fonts.googleapis.com/css?family=Indie+Flower&display=swap');
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap');

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#26262c;
  display:none;
}  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:440px;
  height:850px;
  display:none;
  z-index:9999;
  padding:20px;
  border-radius: 5px;
  text-align: center;
}
#boxes #dialog {
  width:450px; 
  height:auto;
  padding: 10px 10px 10px 10px;
  background-color:#ffffff;
  font-size: 15pt;
}

.popupoption:hover{
 background-color:#D1D1D1;
 color: green;
}
.popupoption2:hover{
 color: red;
}

#san p{
  font-family: 'Indie Flower', cursive;
}

#san h2{
  font-family: 'Abril Fatface', cursive;
}

#san .my-link{
  text-decoration: none;
  background-color: #ffff00;
  color: #000;
}

#san .close{
  float:right;
  margin-top: -35px;
  color: grey;
  font-size: 30px;
  text-decoration: none; 
  font-weight: bold;
}

#san .close:hover{
  color: red;
}

skrip diatas kalian bisa buat, kemudian simpan dengan nama pop.css

<div class="maintext">
		<h2> Main text goes here...</h2>
	</div>
	<div id="boxes">
		<div style="top: 50%; left: 50%; display: none;" id="dialog" class="window"> 
			<div id="san">
				<a href="#" class="close agree">&times;</a>
				<h2>KURSUS WEB YELLOWWEB</h2>
				<p>
					Ayo mulai buat webmu sendiri, <a class="my-link" href="https://www.yellowweb.id" target="_blank"><i class="far fa-hand-point-right fa-fw"></i> disini aja yuk!</a><br>
					YELLOWWEB.ID satu peserta langsung dimulai ;)
				</p>
			</div>
		</div>
		<div style="width: 2478px; font-size: 32pt; color:white; height: 1202px; display: none; opacity: 0.4;" id="mask"></div>
	</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 
	<script type="text/javascript" src="pop.js"></script>

pada skrip diatas kalian tempatkan pada bagian tag body, untuk jQuery library kita tempatkan dibagian bawah sebelum tag penutup body, diikuti dengan aktivasi pop-up itu sendiri.

kemudian buat file baru dengan nama pop.js, yang berfungsi sebagai pemicu dari efek pop-up.


$(document).ready(function() { 
		  var id = '#dialog';
		  var maskHeight = $(document).height();
		  var maskWidth = $(window).width();
		  $('#mask').css({'width':maskWidth,'height':maskHeight}); 
		  $('#mask').fadeIn(500); 
		  $('#mask').fadeTo("slow",0.9); 
		        var winH = $(window).height();
		  var winW = $(window).width();
		        $(id).css('top',  winH/2-$(id).height()/2);
		  $(id).css('left', winW/2-$(id).width()/2);
		    $(id).fadeIn(2000);  
		    $('.window .close').click(function (e) {
		  e.preventDefault();
		  $('#mask').hide();
		  $('.window').hide();
		    });  
		    $('#mask').click(function () {
		  $(this).hide();
		  $('.window').hide();
		 });  
		 
		});

Untuk skrip secara keseluruhan, kalian harus gabungkan kemudian jika ingin melihat hasil jadinya, kalian dapat mengunjungi demo yang terdapat di situs JSFiddle, tepatnya disini: https://jsfiddle.net/miftahfs/7e8j2mq1/5/

Nah cukup mudah bukan, semoga tutorial yang singkat ini bermanfaat bagi teman-teman semua, dan sampai berjumpa lagi pada artikel berikutnya.