Membuat Form Login Popup dengan CSS dan Javascript

Utilitas Popup semacam gambar diatas akan sangat bermanfaat untuk menghemat halaman yang akan ditampilkan pada sebuah website. Biasanya popup seperti itu disebut dengan istilah modal. jika anda menggunakan framework CSS seperti Bootstrap hal ini dapat dengan mudah anda buat karena dalam Bootstrap modal tersebut telah tersedia jadi tinggal dipanggil saja. Bagaimana jika tidak menggunakan Bootstrap ? Berikut saya berikan triknya. 

Untuk membuatnya kita memerlukan Library JQuery dan CSS. Jadi Silahkan Download File Javascript dan Library JQuery disini.
Membuat Form Login Popup dengan CSS dan Javascript
1. Buat Sebuah Folder yang akan menampung File-File Projek anda nantinya. Letakkan File Javascript yang telah anda download kedalam folder tersebut.

2. Buat Sebuah File CSS dengan nama style.css sedangkan isinya dapat anda lihat disini

3. Buat Sebuah File dengan nama index.html Lalu panggil File Javascript dan CSS yang telah anda buat dalam file tersebut. Source code lengkap untuk file index.html adalah sebagai berikut
<link href="css.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript" src="login.js"></script>

<a href="#login-box" title="Login" class="login-window">Form Login</a>

   <!--Login Start-->
     <div id="login-box" class="login-popup">
        <a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Tutup" alt="Close" /></a>
          <form method="post" class="signin" action="action/login.php">
                <fieldset class="textbox">
             <label class="username">
                <span>Username</span>
                <input id="username" name="username" value="" type="text" placeholder="Username" required/>
                </label>
                <label class="password">
                <span>Password</span>
                <input id="password" name="password" value="" type="password" placeholder="Password" required/>
                </label>
                <center><button class="button gray medium" type="submit" name="login">Login</button><button class="button gray medium" type="reset">Hapus</button></center>
                </fieldset>
          </form>
  </div>
  <!--Login End-->

Simpan File Index.html tersebut kemudian coba jalankan. Jika tidak ada kesalahan hasilnya seperti gambar diatas. Selamat mencoba dan Happy Coding. :)

Post a Comment

4 Comments

  1. Gan File login.php nya ko ga ada yah,,bisa minta gan

    ReplyDelete
  2. Ingin beruntung seperti temen-temen kamu?

    Langsung saja kamu mendaftar di AsliBandar dan rasakan permainan yang akan membuat hidupmu berwarna.

    Dengan Deposit yang terjangkau kamu berkesempatan menangkan Jackpot setiap harinya.

    Ingin beruntung seperti temen-temen kamu?

    Langsung saja kamu mendaftar di www.AsliBandar.net dan rasakan permainan yang akan membuat hidupmu berwarna.

    Dengan Deposit yang terjangkau kamu berkesempatan menangkan Jackpot setiap harinya.

    Untuk Info lebih lanjut silahkan menghubungi kami melalui :

    Pin BB : 2B3C34F4
    YM : Aslibandar_CS
    Skype : AsliBandar
    Telp : +855882388666
    FB : AsliBandar

    ReplyDelete
  3. Halo Bossku ^^
    Segera Daftarkan ID di skb288,com
    Menyediakan 7 Permain Hanya Dengan 1 ID
    Serta Tersedia Promo Menarik
    Bonus Turn Over Terbesar
    Bonus Refferal Seumur Hidup
    Minimal Deposit Hanya 20Rb
    BBM : D8E87241
    WA : +62 878 8707 6927
    Di Tunggu Kehadirannya Bossku ^^

    ReplyDelete

bantu kami untuk lebih baik; jika ada hal yang kurang jelas atau broken link silahkan masukan komentar anda kami akan segera menanggapi dan memperbaikinya. login ke akun gmail anda untuk menampilkan form komentar.