Pop-Up Window on Page Load jQuery

Menampilkan Pop-Up Window pada saat halaman dibuka (On-Load Page)

by Miftah Faroq

HTML

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.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>

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;
}

JavaScript

$(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();
		 });  
		 
		});