Home > Menengah > Web Desain > Tutorial JQuery > Membuat Popup dengan HTML, CSS3, dan JQuery Tanpa Plugin

.

2 Komentar Untuk Artikel Ini BYAdmin Ilmuwebsite

slide_popup

Salam, wuff, alhamdulillah ilmuwebsite kembali menjadi sesuatu yang diharapkan kembali di dunia web development, tentunya dalam memberikan edukasi untuk para pemula khusus di dunia web development, dan web design. Meski terkadang disini kami pun memberikan tutorial seperti Desain Grafis, Arsitektur Interior, FotoGrafi, Jaringan komputer, dll.

Baiklah mari kita masuk ke dalam topik utama, kali ini akan kita mempelajari kembali studi kasus bagaimana membuat popup.

Apakah itu popup. Dari pada saya menjelaskan sangat jauh, lebih baik Anda lihat sendiri contohnya adalah seperti ini.
popup

Ketika Anda memasuki website biasanya kadang terdapat/muncul popup seperti ini, atau ketika Anda ber-facebook-an pun seringkali menemukan popup dalam facebook. Nah, namun bagaimana caranya membuat popup ?

Sebagian besar web designer lebh memilih menggunakan plugin jquery, ketimbang membuat sendiri, padahal sebetulnya ketika meracik sendiri itu jauh lebih ringan, dan kodenya juga jauh lebih efisien, dan tidak banyak barisan kode yang terbuang percuma tidak terpakai. Namun bagaimana sih cara membuat popup?

Silahkan klik button di bawah ini untuk melihat demonya

Lihat Demo

 

Pertama-tama kita buat terlebih dahulu HTML kosongnya.

 

Lalu kita persiapkan agar halaman tersebut bisa mengeksekusi jquery.

 

Selanjutnya adalah menyiapkan terlebih dahulu, elemen html yang dibutuhkan untuk tampil ketika halaman di load, yakni si popup itu sendiri.

 

Kemudian script css stylenya, bagian penting :

 

Perhatikan potongan kode di bawah

Ini memiliki arti bahwa div.popup itu memiliki position fixed, ketika browser scrollbar di gulung dia akan tetap pada posisinya, kemudian width 100% dan height 100% membuat dia memenuhi browser, di perkuat dengan top bottom left right 0. Jadilah ia popup.

Lalu bagaimana menutup popupnya ? Caranya adalah dengan jquery event click. Kode lengkapnya untuk tutorial ini adalah :

 

Silahkan klik button di bawah ini untuk melihat demonya

Lihat Demo

Sekian Tutorial JQuery Kasus Bagaimana Membuat Popup. Selamat Mencoba

DVD Video Tutorial : Kursus Web Development Komplit Bangun 5 Project Aplikasi Website - Membuat CMS Sendiri Dari Nol, Blog, Portal Berita, Ecommerce, Web Komunitas dengan CodeIgniter 3 JQuery AJAX Bootstrap

Video Tutorial Kursus Web Development Komplit Bangun 5 Project Website ini merupakan ‘penunjuk arah’ agar Anda yang sedang maupun baru akan terjun ke dalam dunia web development yang lebih mendalam memiliki peta perjalanan pembelajaran yang lebih terarah menuju web developer professional. (Disertai pembelajaran dasar HTML CSS, JQuery, PHP & MySQL, CodeIgniter) Dibuat oleh praktisi yang memiliki pengalaman lebih dari 10 tahun di bidang web development (Pemesanan bisa SMS/WA ke 0813 1167 5785, atau bisa pesan secara online di sini)



2 Response untuk Artikel Ini

  1. andre

    Bagus gan tutorialnya, bisa buat refrensi. Biasanya cuma pakai plugin javascript saja. thx


  2. Choirul

    Bagaimana cara menerapkannya di wordpress. Thanks


You must be logged in to post a comment.

eXTReMe Tracker