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">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.
No comments:
Post a Comment