Cara membuat: Buat pesan pop-up

Belajar cara menggunakan CSS untuk membuat pesan pop-up (Callout Message).

Pesan pop-up

Pesan pop-up biasanya berada di dasar halaman, untuk memberitahu pengguna tentang hal yang penting: tips/tips, potongan, tindakan yang perlu diambil, dll.

Coba sendiri

Buat pesan pop-up

Langkah pertama - Tambahkan HTML:

<div class="pesan-luaran">
  <div class="header-pesan-luaran">Header Pesan Pop-Up</div>
  <span class="tombol-tutup" onclick="this.parentElement.style.display='none';">×</span>
  <div class="kontainer-pesan-luaran">
    <p>Beberapa teks...</p>
  </div>
</div>

Jika Anda ingin menonaktifkan fungsi menutup pesan pop-up, tambahkan <span> elemen, dan atur suatu onclick atribut, yang menunjukkan "Jika saya di klik, sembunyikan elemen induk saya", yaitu kontainer <div class="pesan-luaran">.

Petunjuk:Gunakan entitas HTML "×"Buat huruf "x"."

Langkah kedua - Tambahkan CSS:

Atur gaya untuk boks pesan pop-up dan tombol tutup:

/* Boks pesan pop-up - tetap di posisi dasar halaman */
.pesan-luaran {
  posisi: tetap;
  bawah: 35px;
  kanan: 20px;
  margin-kiri: 20px;
  max-lebar: 300px;
{}
/* Judul pesan pop-up */
.header-pesan-luaran {
  padding: 25px 15px;
  background: #555;
  ukuran tulisan: 30px;
  warna: putih;
{}
/* Kontainer pesan pop-up/isi */
.kontainer-pesan-luaran {
  padding: 15px;
  warna latar: #ccc;
  warna: hitam
{}
/* Tombol tutup */
.tombol-tutup {
  posisi: absolut;
  atas: 5px;
  kanan: 15px;
  warna: putih;
  ukuran tulisan: 30px;
  kursor: tangan;
{}
/* Ganti warna saat tetikus diatas */
.tombol-tutup:hover {
  warna: gelap biru;
{}

Coba sendiri

Halaman yang berhubungan

Panduan:Bagaimana membuat pesan peringatan

Panduan:Bagaimana membuat stiker