CARA MEMBUAT POPUP LOGIN DAN DAFTAR (SIGNUP) MENGGUNAKAN BOOTSTRAP
- Dapatkan link
- X
- Aplikasi Lainnya
CARA MEMBUAT POPUP LOGIN DAN DAFTAR (SIGNUP) MENGGUNAKAN BOOTSTRAP
bewoksatukosong.com | Hallo semuanya balik lagi dengan om bewok, kali ini om bewok akan memberikan Tutorial Cara Membuat Popup login dan daftar (signup) menggunakan bootstrap.
DEMO
Om bewok akan menjelaskan maksud dari kodinganya ya, untuk script dan tampilanya bisa di lihat di demo ya
data-toggle="modal" berguna untuk menampilkan atau membuat popup nya.
data-target="#mydaftar" dan data-target="#mylogin" berguna untuk menghubungkan dari div id mydaftar dan div id mylogin
model-header = berguna untuk menampilkan bagian atas pada popup, kita gunakan model-header untuk menampilkan Pendaftaran Sekolah
model-body = untuk menampilkan isi dari popup, seperti input username, email, password dan lain - lain
model-footer = untuk digunakan bagian bawah dari popup, seperti button login dan close
Kamu bisa lihat hasilnya dan codinganya di DEMO
DEMO
Itu aja tutorial hari ini semoga bermanfaat buat teman - teman yang ingin belajar cara membuat popup login dan signup menggunakan bootstrap.
Maksudnya gmn sih om ?Jadi ketika kamu klik signup atau login maka tidak pindah halaman tapi akan muncul popup. kodinganya bisa lihat di sini ya
DEMO
Om bewok akan menjelaskan maksud dari kodinganya ya, untuk script dan tampilanya bisa di lihat di demo ya
<!DOCTYPE html>
<html>
<head>
<title>Popup Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a href="" class="navbar-brand">bewoksatukosong</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li data-toggle="modal" data-target="#mydaftar"><a href="#"><span class="glyphicon glyphicon-user"></span> Daftar</a></li>
<li data-toggle="modal" data-target="#mylogin"><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
<!-- Modal daftar -->
<div id="mydaftar" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Pendaftaran Sekolah</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Fullname</label>
<input type="text" class="form-control" id="Fullname" placeholder="Fullname">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Username</label>
<input type="text" class="form-control" id="username" placeholder="Username">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal">Daftar</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- end modal daftar -->
<!-- Modal login -->
<div id="mylogin" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Pendaftaran Sekolah</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Username</label>
<input type="text" class="form-control" id="username" placeholder="Username">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal">Login</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Modal Login -->
</body>
</html>
HOME |
POPUP DAFTAR |
POPUP LOGIN |
data-target="#mydaftar" dan data-target="#mylogin" berguna untuk menghubungkan dari div id mydaftar dan div id mylogin
<div id="mylogin" class="modal fade" role="dialog">
modal fade berfungsi effect untuk menghilangkan popup tersebut, kalau di hapus maka popup nya akan muncul duluan dan ga bisa di close, kalian bisa eksperimen sendiri ya.model-header = berguna untuk menampilkan bagian atas pada popup, kita gunakan model-header untuk menampilkan Pendaftaran Sekolah
model-body = untuk menampilkan isi dari popup, seperti input username, email, password dan lain - lain
model-footer = untuk digunakan bagian bawah dari popup, seperti button login dan close
Kamu bisa lihat hasilnya dan codinganya di DEMO
DEMO
Itu aja tutorial hari ini semoga bermanfaat buat teman - teman yang ingin belajar cara membuat popup login dan signup menggunakan bootstrap.
- Dapatkan link
- X
- Aplikasi Lainnya
Komentar
Posting Komentar