JQuery, PHP

Desain Login, daftar & lupa password modal form dengan Bootstrap dan jQuery

Desain Login, daftar & lupa password modal form dengan Bootstrap dan jQuery

Hari ini dalam tutorial ini kita akan melihat bagaimana mendesain halaman login, pendaftaran & lupa Password Modal Form  menggunakan Bootstrap dan jQuery. Menciptakan dan menyesuaikan modal bootstrap ini cukup mudah, maksudku benar-benar mudah, modal memungkinkan Anda untuk membuka jendela pop-up yang sangat baik dalam halaman yang sama tanpa mengalihkan ke setiap halaman yang terpisah untuk setiap tugas tertentu,

Halaman login/daftar terpisah misalnya, memiliki bentuk Modal di situs web memberikan UI lebih baik. Dalam contoh ini, saya telah membuat login, pendaftaran dan lupa password modal yang dapat Anda buat dengan mudah, mari kita lihat.

 

Di sini kita akan melihat creating form bentuk-bentuk pada bootstrap modal dengan validasi.

Yah saya telah menggunakan di sini Bootstrap V 3.3.7 - Download di sini. Atau Anda dapat juga menggunakan CDN jika Anda tidak ingin men-download.

 

Desain: Struktur halaman

Berikut ini adalah struktur halaman HTML, mengatur apapun yang diperlukan CSS dan JS file sebagai berikut.





IdeMastah :: Desain Login, daftar & lupa password modal form dengan Bootstrap dan jQuery




     
      
    




 

Desain : Modal

Seperti kita semua tahu bahwa bootstrap modal-content div berisi modal-header, body-modal dan modal-footer div,  ini adalah struktur modal.


 

Ini akan ditempatkan di atas JS file seperti yang ditunjukkan dalam Struktur halaman. Lihat contoh di bawah ini.

 

Struktur halaman lengkap

Ini adalah struktur halaman lengkap yang diperlukan untuk membuat modal pop-up. Buat halaman Index.php dan tambahkan kode berikut di dalamnya.





IdeMastah :: Desain Login, daftar & lupa password modal form dengan Bootstrap dan jQuery




         



 

Jadi kami telah menciptakan sebuah blank html markup, sekarang mari kita membuat Login, pendaftaran dan lupa Password Modal. Modal yang saya gunakan di sini dengan tiga

 

Dalam contoh di atas konten modal login akan default dan sisa lainnya tersembunyi dan akan ditampilkan bila mengklik link tertentu yang diberikan dalam semua modal-footer.

 

Login, pendaftaran, lupa Password Modal form: Modal lengkap

Sampai sekarang kami telah melihat html markup dan struktur, sekarang mari kita lihat pada Modal lengkap yang berisi Login, pendaftaran dan lupa Password modal-content div.

 

Sekarang saya berharap Anda tidak bingung, ini adalah bentuk sederhana modal, satu modal dengan tiga modal-content, itu saja.

Semua modal-footer berisi link terpisah yang memicu trigger modal [login/pendaftaran/lupa password], misalnya halaman Login memiliki footer  lupa password dan memiliki link pendaftaran, pendaftaran Footer Login link, lupa password footer memiliki login link.

 

JQuery Part

Kami telah merancang, sekarang saatnya dari scripting, jQuery effect, lihatlah kode jQuery sederhana ini. Ini jQuery sederhana FadeOut dan FadeIn effect, trigger pada klik Footer link.

 

Form validasi

Saya telah menggunakan Parsley.JS Form validasi Plugin untuk memvalidasi semua form, sederhana dan mudah untuk menggunakan jQuery plugin. Kami sudah tambahkan parsley.min.js dengan JS file di bagian bawah halaman. dan untuk memicu validasi menambahkan satu baris kode jQuery.

$('#Login-Form').parsley();
$('#Signin-Form').parsley();
$('#Forgot-Password-Form').parsley();

 

Bagian CSS

Berikut adalah kode CSS untuk semua desain modal ini, CSS yang berisi kode untuk modal dan validasi parsley.

body {
  padding-top: 70px;
}
.modal-header, .modal-body, .modal-footer{
  padding: 25px;
}
.modal-footer{
  text-align: center;
}
#signup-modal-content, #forgot-password-modal-content{
  display: none;
}
 
/** validation */
  
input.parsley-error{    
  border-color:#843534;
  box-shadow: none;
}
input.parsley-error:focus{    
  border-color:#843534;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483
}
.parsley-errors-list.filled {
  opacity: 1;
  color: #a94442;
  display: none;
}

 

Selesai! That's it untuk hari, saya harap Anda menikmati dan menyukainya. ini hanya merancang bagian yang telah kita lakukan di sini ada lebih banyak untuk untuk kita buat waktu berikutnya.

Share This Post

Leave Comment

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.