Alert Dialog Html Css

MUAZHAN

5 min read

·

Jun 28, 2024

21

Share

Membuat Alert Dialog dengan HTML dan CSS

Alert dialog adalah elemen penting dalam desain website untuk memberikan informasi, peringatan, atau konfirmasi kepada pengguna. Artikel ini akan memandu Anda untuk membuat alert dialog sederhana dengan HTML dan CSS.

Struktur HTML

Pertama, kita akan membuat struktur dasar HTML untuk alert dialog:

    
    
    
    


    Buka Alert Dialog

    

        

            ×
            
Judul Alert Dialog
            
Isi pesan alert dialog.
            Tutup
        
    

    

Kode di atas membuat:

• Tombol "Buka Alert Dialog": Tombol ini akan memicu munculnya alert dialog.
• Div dengan ID "alert-dialog": Div ini akan menjadi wadah utama alert dialog.
• Div dengan class "dialog-content": Div ini berisi konten alert dialog seperti judul, pesan, dan tombol.
• Span dengan class "close-dialog": Span ini berisi simbol "X" untuk menutup alert dialog.
• H2: Judul alert dialog.
• P: Pesan alert dialog.
• Tombol "Tutup": Tombol ini akan menutup alert dialog.

Styling dengan CSS

Selanjutnya, kita akan menambahkan style dengan CSS untuk memberi tampilan yang lebih menarik:

.dialog {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.dialog-content {
    text-align: center;
}

.close-dialog {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
}

#close-dialog-button {
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

Kode CSS di atas mendefinisikan:

• Style dasar "dialog": Menentukan posisi, ukuran, warna, dan efek visual alert dialog.
• Style "dialog-content": Menentukan style konten dalam alert dialog.
• Style "close-dialog": Menentukan style simbol "X" untuk menutup alert dialog.
• Style "close-dialog-button": Menentukan style tombol "Tutup" alert dialog.

Fungsi JavaScript

Terakhir, kita akan menambahkan JavaScript untuk mengontrol tampilan alert dialog:

const openDialog = document.getElementById("open-dialog");
const closeDialog = document.getElementById("close-dialog");
const closeDialogButton = document.getElementById("close-dialog-button");
const dialog = document.getElementById("alert-dialog");

openDialog.addEventListener("click", () => {
    dialog.style.display = "block";
});

closeDialog.addEventListener("click", () => {
    dialog.style.display = "none";
});

closeDialogButton.addEventListener("click", () => {
    dialog.style.display = "none";
});

Kode JavaScript di atas:

• Mengambil elemen DOM: Memilih elemen-elemen yang dibutuhkan seperti tombol "Buka", tombol "Tutup", dan alert dialog.
• Menambahkan event listener: Menambahkan event listener pada tombol "Buka" dan tombol "Tutup" untuk menampilkan dan menyembunyikan alert dialog.

Kesimpulan

Dengan menggunakan HTML, CSS, dan JavaScript, Anda telah berhasil membuat alert dialog sederhana yang dapat digunakan dalam website Anda. Anda dapat memodifikasi style dan konten alert dialog sesuai dengan kebutuhan Anda. Selamat bereksperimen!