setelah sebelumnya berbagi tentang bagaimana cara membuat parallax point slider dengan jquery dan css , kali ini akan berbagi, bagaimana cara membuat panel Popup menggunakan Popup Cascading Sytle.
menggunakan tag div dan anda nanti bisa mengcutomisasi sendiri scriptnya. langsung saja :
langkah pembuatan,
1. buatlah folder dengan nama popup
2. silahkan download file plugin Popup Cascading Style. dan simpan lah dengan nama popup.css dan letakan di folder popup
3. setelah itu, buatlah file HTML Basic dan simpan dengan nama index.html , letakan di folder popup
4. buatlah script di bawah ini
pemanggilan popup.css
5. buatlah kontent popup, dengan script dibawah ini.
6. untuk pemanggilan kontent popup, adalah dengan script dibawah ini.
7. ini adalah script penuh dari file index.html
8. pengurutan file dapat di perhatikan susunannya adalah
popup/popup.css
popup/index.html
9. silahkan anda test di webbrowser anda
Raka Adi Nugroho
Salam Joskoder
menggunakan tag div dan anda nanti bisa mengcutomisasi sendiri scriptnya. langsung saja :
1. buatlah folder dengan nama popup
2. silahkan download file plugin Popup Cascading Style. dan simpan lah dengan nama popup.css dan letakan di folder popup
3. setelah itu, buatlah file HTML Basic dan simpan dengan nama index.html , letakan di folder popup
4. buatlah script di bawah ini
pemanggilan popup.css
<link rel="stylesheet" href="popup.css">
5. buatlah kontent popup, dengan script dibawah ini.
<div id="overlay"> <div id="popup" <h1>Kontent Login Disini</h1> </div> </div>
6. untuk pemanggilan kontent popup, adalah dengan script dibawah ini.
href="#overlay"
7. ini adalah script penuh dari file index.html
<html> <head> <title>Contoh</title> <link rel="stylesheet" href="popup.css"> </head> <body> <a href="#overlay" id="button">Masuk</a> <div id="overlay"> <div id="popup" <h1>Kontent Login Disini</h1> </div> </div> </body> </html>
8. pengurutan file dapat di perhatikan susunannya adalah
popup/popup.css
popup/index.html
9. silahkan anda test di webbrowser anda
Raka Adi Nugroho
Salam Joskoder
Gak ada demonya kaks :-?
ReplyDeletebelum ada mas, hhehe tapi ITS WORK !
Deletetombol close-nya gak ada ya?
ReplyDeletekira-kira popup ini bisa dipakai berulang-ulang dalam satu page gak?
misal : buat Login, Register, atau Admin.