Berbeda dengan bootstrap, cara membuat popup modal di tailwind css dilakukan dengan membuat komponen sendiri dari 0. Dengan begitu, anda harus membuat tampilan layout sendiri dan membuat dom manipulation javascript sendiri atau juga dengan menggunakan bantuan pihak 3 (“SweetAlert Library”).
Untuk saat ini, saya akan membagikan cara membuat popup modal di tailwind css dengan bantuan javascript tanpa library lain.
Tailwind CSS pada tahun 2024 menjadi salah satu framework css yang paling populer. Salah satu kelebihan tailwind css adalah setiap style dari css telah dikemas dalam setiap “class” atau disebut “utility” dan mudah untuk di custom sesuai dengan kebutuhan.
Disisi lain, tailwind css sendiri tidak memberikan terlalu komponen-komponen bootstrap, namun beberapa diantaranya dijual. Untuk itu anda tidak perlu khawatir, saya akan memberikan sedikit cara agar logic dari popup modal yang anda buat bisa berfungsi.
Cara Membuat Popup Modal di Tailwind Css
Popup Modal merupakan sebuah dialog box yang muncul pada layar anda, baik itu yang otomatis muncul ketika website dibuka maupun karena adanya trigger atau pemicu. Biasanya untuk menampilkan informasi, form, ataupun button call to action.
Tapi sebelumnya pastikan anda sudah setup tailwind pada projek anda, baik itu menggunakan cli maupun cdn. Kemudian pastikan juga anda paham sedikit dengan html, javascript, dan tentunya tailwind. Berikut Langkah-langkahnya :
Membuat Layout Dan Tombol Pembuka Modal
Saya tidak akan membuat layout yang sangat bagus, tapi lebih fokus ke logic agar modal bisa muncul dan bisa hilang kembali. Anda bisa copy kode yang saya buat di bawah ini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cara Mudah Membuat Popup Modal di Tailwind CSS Untuk Pemula</title>
<link rel="stylesheet" href="src/output.css">
</head>
<body class="h-screen bg-slate-900 grid place-items-center font-serif">
<!-- Open Modal Button -->
<button class="text-slate-700 bg-slate-300 py-2 px-5 rounded-lg shadow open-modal" data-target="#myModal">Open Modal</button>
<!-- Modal Layout -->
<div id="myModal" class="modal fixed hidden z-[100] inset-0 backdrop-blur bg-black bg-opacity-50 overflow-y-auto h-full w-full">
<div class="relative my-container top-20 text-center text-slate-400">
<div class="relative mx-auto p-5 w-full max-w-xs bg-gradient-to-tr from-[#030e31] to-indigo-950 rounded-2xl shadow-lg">
<!-- Close Modal Button -->
<button class="right-3 top-2 absolute hover:scale-110 close-modal" type="button">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 stroke-[3px] stroke-slate-500" fill="none"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<div class="body-modal">
<h3 class="px-6 text-3xl font-bold mt-3">Popup Modal</h3>
<p class="leading-5 mt-3 mb-4">Ini adalah contoh popup modal menggunakan tailwind css</p>
</div>
<!-- Close Modal Button -->
<button class="text-slate-700 bg-slate-300 py-2 px-5 rounded-lg shadow close-modal" type="button">Close</button>
</div>
</div>
</div>
<script src="src/script.js"></script>
</body>
</html>Pada kode di atas terdapat open modal button yang ditandai dengan class “open-modal” dan data-target “#myModal”, yang berfungsi sebagai trigger atau pemicu ketika diklik maka modal dengan dengan id #myModal” akan terbuka. Begitu juga sebaliknya dengan close modal button.
Lalu untuk mengisi elemen dalam modal tersebut cukup dengan menambahkan elemen baru di dalam class “body-modal”.
Menambah atau custom sebuah animation di Tailwind.config.js
Mungkin anda bertanya-tanya apa fungsi dari animation ini. Oh jelas, agar pada saat open modal button di klik, kemudian modal tersebut muncul dengan cara bergerak dari atas ke bawah.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}" , "index.html"],
theme: {
extend: {
keyframes: {
showModal: {
'0%': { transform: 'translateY(-30px)', opacity: '0' },
'100%': { transform: 'translateY(0px)', opacity: '1' },
},
},
animation: {
showModal: 'showModal .4s ease-in-out',
},
},
},
plugins: [],
}Untuk membuat sebuah animasi custom pada tailwind, anda perlu menambahkan keyframes dan animation dalam object extend. Seperti pada code diatas, saya memberi nama animation “showModal” dengan aturan perubahan selama 0,4 detik, jika modal muncul maka posisi sedikit di atas dan opacitynya 0, lalu dia akan bergerak perlahan ke bawah dan menaikkan opacity menjadi 1.
Apabila ingin menggunakan animation yang saya buat, cukup copy kode yang ada dalam object extend saja.
Membuat Logic Modal Dengan Dom Manipulation Javascript
// get modal open
const btnOpenModal = document.querySelectorAll(".open-modal");
btnOpenModal.forEach(btn => {
btn.addEventListener('click', () => {
const targetModal = btn.getAttribute('data-target');
openModal(targetModal);
});
});
// open modal
const openModal = function (targetModal) {
const modalElement = document.querySelector(targetModal);
modalElement.classList.remove('hidden');
modalElement.firstElementChild.classList.add('animate-showModal');
}
// get close open
const btnCloseModal = document.querySelectorAll(".close-modal");
btnCloseModal.forEach(btn => {
btn.addEventListener('click', () => {
closeModal();
});
});
// closeModal
const closeModal = function () {
const modalElement = document.querySelectorAll('.modal');
modalElement.forEach(e => {
e.classList.add('hidden');
e.firstElementChild.classList.remove('animate-showModal');
});
}
Yang pertama “get modal open”, ini berfungsi untuk menyeleksi semua open modal button, kemudian ketika salah satu diklik, maka akan mengambil modal dengan id yang terdapat pada data-target. Ketika id sudah didapatkan, maka function “openModal” akan memunculkan modal dengan menghapus class “hidden” dan menambah class “animate-showModal”.
Yang kedua “get close button”, adalah kebalikan dari yang pertama. Fungsinya ketika element close modal yang memiliki class “close-modal” diklik, maka semua modal akan dihilangkan dengan menambah class “hidden” dan menghapus class “animate-showModal”.
Fungsi Membuat Popup Modal di Tailwind CSS
Seperti yang sudah saya katakan diawal, tailwind sangat populer dengan “utility class” nya. Anda bisa custom dengan sesuai dengan kebutuhan, meskipun memakan waktu lebih banyak jika dibandingkan dengan menggunakan bootstrap. Namun anda dapat membuat layout yang sangat bagus dan kekinian.
Dengan mengikuti langkah-langkah di atas, saya pastikan popup modal anda bisa berfungsi dengan baik. Anda juga tidak harus berpatokan pada kode yang saya buat, silahkan custom sesuai kebutuhan dan kreatifitas anda.
Demikin cara membuat popup modal di tailwind css untuk pemula dengan bantuan javascript, semoga membantu.