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

Cara Membuat Proxy Checker Dengan VB.NET

Pertama kita perlu Impor dua paket, satu untuk menggunakan StreamReader dan StreamWriter dan lain untuk menggunakan HttpWebRequest dan HttpWebResponse. 1.   Imports System.IO 2.   Imports System.Net Tambahkan listbox dan tiga tombol. Listbox akan berisi laporan masing-masing proxy dan tombol akan untuk; Mulai checker, Mengekspor semua laporan dan Mengekspor laporan kerja Pertama mari kita membuat script awal. Mari kita membuat OpenFileDialog untuk memilih daftar proxy dan memeriksa jalur ini tidak ada / null / kosong:
Post a Comment
Read more

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",...
20 comments
Read more

Source Code Aplikasi Rekam Medis PHP MySQL [Edisi 2]

selamat siang, setelah seelumnya berbagi tentang rekam medis sistem hah, sudah lama postingannya cari sendiri aja. kali ini saya ingin berbagi Source Rekam Medis Edisi 2 [+ Ada Installernya Lho ! oke isinya silahkan cek sendiri. :) untuk download silahkan klik link dibawah semoga membantu DOWNLOAD APPS KESEHATANKU butuh web jasa pembuatan apps kantor dll, konsul ta ? 085601053150
22 comments
Read more