Skip to main content

Cara Membuat Login Popup dengan CSS3

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
<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 


Labels:

Comments

  1. UnknownMay 18, 2014 at 4:55 PM

    Gak ada demonya kaks :-?

    ReplyDelete
  2. HaikyuuDecember 16, 2014 at 1:18 PM

    tombol close-nya gak ada ya?
    kira-kira popup ini bisa dipakai berulang-ulang dalam satu page gak?

    misal : buat Login, Register, atau Admin.

    ReplyDelete

Post a Comment

Popular posts from this blog

Membuat Login Register Dengan Verifikasi Email PHP MySQL

selamat siang, sudah dua bulan tidak memberikan update, setelah terakhir update masalah nodejs dan angular . kali ini saya akan berbagi tutorial. bagaimana cara membuat register dengan php, namun dengan verifikasi email. pertama seperti biasa buatlah database " rakaadinugroho ". setelah itu eksekusi sql dibawah ini: CREATE TABLE IF NOT EXISTS `pengguna` (   `id` int(1) NOT NULL AUTO_INCREMENT,   `nama` varchar(225) COLLATE utf8_unicode_ci NOT NULL,   `password` varchar(225) COLLATE utf8_unicode_ci NOT NULL,   `email` varchar(225) COLLATE utf8_unicode_ci NOT NULL,   `kode` varchar(225) COLLATE utf8_unicode_ci NOT NULL,   `status` int(1) NOT NULL DEFAULT '0',   PRIMARY KEY (`id`),   UNIQUE KEY `email` (`email`) ) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=3 ; setelah itu buat file konektornya, buat " koneksi.php ". kodenya seperti dibawah ini: <?php mysql_connect("localhost","root",&qu
21 comments
Read more

Source Code Kuesioner Mahasiswa Online PHP+MySQL+Bootstrap

Alhamdulillah, selamat pagi. salam sejahtera bagi kita semua terutama pengunjung raka adi nugroho blogs. Pengumuman! Aplikasi Kuesioner Semakin Berkembang. Update Apa Saja? - Perubahan Besar-besaran, ditulis dengan Framework CI - Struktur yang sangat berbeda, Kuesioner Pertopik dan Per Sub Topik - Jadi, Jika Anda Membeli. Anda Akan Mendapatkan 2 Aplikasi Kuesioner pagi ini, setelah lama vakum karena mengerjakan projek yang akan saya update kali ini. yaitu projek tugas akhir yang katanya sulit rumit dan susah . yaitu software kajian kuesioner mahasiswa online untuk mengambil hak angketnya terhadap kualitas dosen disebuah universitas. langsung saja, disini saya menggunakan bootstrap agar lebih stylish Diatas adalah gambar dari Databasenya Diatas adalah Gambar Login pemilik Hak Angket Gambar, Pendaftaran Hak Angket Gambar Berhasil Login Gambar Kuesionernya I Gambar Kuesionernya II Hak Angket Sudah diGunakan Gambar Administrator Area,
26 comments
Read more

Pengolahan Citra Digital - Digital Image Processing Java Android

Assalamu'alaikum, wr wb. Selamat pagi, kali ini saya akan berbagi source tentang digital image processing ( pengolahan citra digital ) menggunakan java android, yang saya bangun dengan IDE Android Studio. setelah lama tidak menulis :D 6 bulan yang lalu sepertinya tulisan terakhir saya :v karena sedang fokus sekolah . oke, langsung saja berikut adalah penampakan aplikasinya. (tampilan depan) (tampilan menu) (setelah choose gambar) (splash screen) dalam aplikasi ini, terdapat 3 file utama 1. MainActivity.java = Untuk Main Aplikasinya 2. PCD.java = Untuk Fungsi Digital Image Processingnya 3. ConvolutionMatrix = Untuk Fungsi Yang Menggunakan Mask/Filter Terimakasih Silahkan Dikembangkan dan Kembali Lagi :D Download Disini
6 comments
Read more