Thursday 3 December 2015

CSS Modal Popup

Selamat datang kembali di blog Dewa Coding 21 :)

Sudah 2 hari yah admin tidak posting sebuah artikel lagi hehe maaf yah biasa admin juga kan karyawan jadi kadang ada masa sibuk sama engga hehe

okey buat pertemuan sekarang admin mau nge share lagi nih source code tentang Cara membuat modal popup dengan full css, jadi kita juga bisa tahu lah tentang cara bikinnya gimana tidak selalu mengandalkan frame work hehe
Disini admin mau kasih 3 source code modal full css.

1. untuk modal popup pertama admin membuat animasi modalnya dibuat dari berbagai arah, yang pertama admin membuat modalnya dari atas, yang kedua dari kanan, yang ketiga dari bawah, dan yang keempat dari kiri, jadi pada saat tombol modalnya di klik maka akan muncul lah sebuah popup berdasarkan tombol apa yang nanti kalian klik. untuk gambar dari tampilannya seperti berikut.

 
Untuk source codenya bisa di Download Disini / Here

2. Untuk modal popup yang kedua admin membuat animasi modalnya dengan 3 animasi, yaitu yang pertama ZoomIn jadi ketika si modalnya di klik animasi modalnya itu nge zoom, yang kedua Fade modal ini hanya bermainnya opacity nya saja aja, dan yang terakhir ZoomOut animasinya hampir sama seperti ZoomIn cuma yang membedakan kalo ZoomOut dari besar ke kecil.



Untuk source codenya bisa di download Disini / Here

3. Dan ini modal popup yang terakhir yaitu modal popup rotate, jadi animasi modal ini hanya bermain pada putaran/rotasi tiap tombol modal berbeda berapa kali rotasinya, sebagai contoh untuk yang pertama berputar selama 360 derajat, yang kedua 720 derajat, dan yang ketiga 1080 derajat.



Untuk source codenya bisa di download Disini / Here

Mungkin segitu dulu postingan admin tentang cara membuat modal popup dengan css, jadi kalian juga bisa tahu cara membuatnya gimana jangan selalu download, mudah-mudah ko scriptnya :)

Terima kasih telah berkunjung di blog kami, Jangan lupa berkomentar yah :)

Related Posts

CSS Modal Popup
4/ 5
Oleh

Subscribe via email

Like the post above? Please subscribe to the latest posts directly via email.