Cara Membuat Transition Modal Menggunakan jQuery dan CSS

Pada artikel kali ini kita akan belajar tentang membuat modal atau seperti popup box message. Dalam kesempatan ini modal yang akan dibuat akan ada efek transisi menggunakan css dan jQuery. Bagaimana cara membuat transition modal menggunakan jQuery dan css, yuk langsung saja simak step by step membuatnya.

Langkah Pertama

sahabat buat terlebih dahulu file html yang berisi sebuah button serta content atau isi dari modal yang akan ditampilkan. Coba ketikkan seperti code dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Membuat Transition Modal Sederhana dengan HTML CSS dan jQuery</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="wrap">
		<a class="show">Show Me</a>
		<div class="content">
			<h3>Membuat Transition Modal Sederhana dengan HTML CSS dan jQuery</h3>
			 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, libero, similique. Officiis soluta aut aperiam, ad enim earum vero debitis temporibus vitae. Velit eligendi reprehenderit optio, inventore, nihil sapiente eaque! </p>
			 <a class="close">Close</a>
		</div>
	</div>

pada code diatas terdapat 2 buah button yang menggunakan tag <a> dengan diberi nama class = show dan close lalu berikutnya content isi dari modal yang ditampilkan.

Langkah Kedua

Jika bagian struktur modal sudah diketikkan, sekarang tambahkan style CSS berikut:

body{padding:0;margin:0;background: #7efff5}

.wrap{
	position: relative;
	width: 450px;
	height: 400px;
	background: #ffbe85;
	margin: 20px auto;
	box-shadow: 0 10px 10px rgba(255, 19, 7, 0.4);
}

a{
	text-align: center;
	font-size: 25px;
	text-decoration: none;
	width: 150px;
	height: 50px;
	line-height: 50px;
	border-radius: 25px;
	display: block;
	cursor: pointer;
}

a.show{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color:#8a1717;
	border:2px solid #8a1717;
}

a.close{
	position: relative;
	top: 50px;
	left: 50%;
	transform: translate(-50%);
	color:#7400ff;
	border:2px solid #7400ff;
}

.content{
	transform: perspective(1000px) rotateY(90deg) scale(0);
	transition: .7s;
}

.active{
	transform: perspective(1000px) rotateY(0deg) scale(1);
}

.content{
	position: absolute;
	background: #71f8ff;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 30px;
	border: 5px solid #17c0eb;
	box-sizing: border-box;
}

.content h3, p{
	margin: 0;
	padding: 10px;
	color: #262626;
	text-align: justify;
}

Pada style CSS diatas digunakan untuk memberikan efek transisi saat button show dan close di click. Jadi button click disini diberikan function pada script jQuery seperti dibawah ini

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('a.show').click(function(){
				$('.content').addClass('active')
			});
			$('a.close').click(function(){
				$('.content').removeClass('active')
			});
		});
	</script>

Baiklah apabila sudah semua dahabat ketik code diatas, silahkan simpan lalu coba jalankan pada browser masing-masing dan akan seperti dibawah ini tampilannya:

Demikian pembahasan pada artikel Cara Membuat Transition Modal Menggunakan jQuery dan CSS. Semoga bermanfaat dan sampai jumpa.

terima kasih