Membuat Popup box sederhana mudah

بِسمِ اللَّهِ الرَّحمٰنِ الرَّحيمِ



Anda akan membahasa Popup box, apa itu popup box? atau bisa disebut juga dialog box adalah window kecil pada web anda. yg dapat anda munculkan sebagai alat interaksi untuk bekerja dengan javascript tersebut.
ada 3 buah pop up box yang digunakan yang pertama ada namanya (Alert, prompdat, n Confirm ). dan anda akan membuat satu persatu. mulai dari alert dan seterusnya.

Edit html dan cari </body>


1. Alert

 

Alert fungsi nya hanya memberikan alat komunikasi sederhana di blog.

<script type='text/javascript'>
alert('Selamat datang');
</script>

 anda juga dapat membuat banyak alert dalam 1 blog.

<script type='text/javascript'>
 alert('Selamat datang');
alert('Mudah mudahan kamu ngerti apa saya tulis');
</script>

jadi akan memunculkan 2 alert yg masing masing akan muncul setelah alert sebelumnya. sudah jelas alert yang sederhana, next anda akan membuat popup box yg kedua adalah Prompt.

2. Prompt

 

Prompt ini fungsinya sama memunculkan window kecil, tapi sekarang tidak hanya ada tombol "ok" saja.
maka saat dibuka akan anda kotak dengan input. dan anda bisa memasaukan apa saja anda coba ya.

<script type='text/javascript'>
prompt('Masukan nama');
</script>

   Kalau anda masukan nama anda dikotak itu dan klik ok maka akan hilang, tapi mungkin kalian bertanya tulisan nama anda itu pergi kemana?, jadi sebenarnya apapun yg kita masukan di kotak akan mengembalikan nilai atau yang anda masukan ke dalam inputannya. supaya kita bisa akses ke nilai sebaiknya prompt anda simpan kedalam variable. agar masukan yang pengunjung dapat di tampilkan. lalu akan muncul popup alert yang berisi var nama (yang kalian masukan).


<script type='text/javascript'>
var nama = prompt('Masukan nama');
alert(nama);
</script>

ok, popup yang terakhir adalah "Confirm".

3. Confirm


   Confirm ini digunakan untuk meminta konfirmasi dari pengunjung, kalau anda ingin menghapus data pasti akan ada popup konfirmasi siapa tau user gk sengaja klik tombol hapus lalu akan muncul kotak konfirmasi dan user tinggal klik tombol cancel aja agar tidak jadi menghapus datanya.

<script type='text/javascript'>
confirm('Apakah benar?');
</script>

Menyatukan semua popup didalam 1 blog.


<script type='text/javascript'>
alert('Selamat datang!');
var nama = prompt('Masukan nama');
confirm(nama + ' Apakah benar anda pengunjung Bteks ?, klik ok jika benar');
alert('Apa kabar? ' + nama + ' Selamat ngeblog')
</script>

tanya dikomentar kalau kmu blum mengerti , terima kasih.

KOMENTAR • 8

  1. Nice Info gan Buat Pemula Seperti saya

    BalasHapus
  2. wah nice tutor gan, bisa di terapkan nih

    BalasHapus
  3. artikel nya sangat bermanfaat buat saya gan

    BalasHapus
  4. Thanks gan tutornya, mau coba dulu buat blog.

    BalasHapus
  5. nice tutorial gan, tapi kayaknya pop up seperti diatas malah bikin visitor gabetah deh gan

    BalasHapus
    Balasan
    1. buat pemberlajarannya aja klo gk cocok :)

      Hapus
  6. nice tutor gan, ijin COBA YA

    BalasHapus