CARA MEMBUAT POPUP LOGIN DAN DAFTAR (SIGNUP) MENGGUNAKAN BOOTSTRAP - Bewok Tekno

STAY HUNGRY STAY FOOLISH

Breaking

Home Top Ad

Responsive Ads Here

Monday, August 21, 2017

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
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">&times;</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">&times;</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-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

<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

No comments:

Post a Comment