Bootstrap Form dan Modal - Apa itu modal? tentunya yang saya maksud di sini bukanlah modal berupa uang, melainkan semacam window atau jendela yang muncul ketika kita mengklik suatu tombol pada halaman web. Bisa kita manfaatkan untuk membuat form login yang keren misalnya.
Secara default, modal terbagi menjadi tiga bagian. Yaitu modal-header, modal-body, dan modal-footer.
Saya akan berikan contoh modal sederhana, misalnya :
<div class="container">
<h2>Contoh Modal</h2>
<!-- Trigger modal dengan button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Buka Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-md">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Beberapa teks dalam modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Tutup</button>
</div>
</div>
</div>
</div>
</div>Pada bagian yang saya tandai, yaitu data-target, value-nya menyesuaikan dengan id yang saya tandai, atau sebaliknya.
Untuk modal-md saya tandai karena opsional. Kalian bisa menggantinya dengan modal-sm untuk ukuran small atau modal-lg untuk ukuran large. Secara default jika tidak diberi sizenya adalah modal-md
Misal kita mau membuat form login yang keren. Logikanya, form login tersebut hanya muncul saat user mengklik tombol "login", kita bisa memasukkan form login tersebut kedalam modal. Misalnya :
<div class="container">
<!-- Trigger modal dengan button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Login!</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-md">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Mohon login terlebih dahulu!</h4>
</div>
<div class="modal-body">
<center>
<div class="form-group">
<form>
<img src="http://www.speedstudyforbusiness.com/images/testimonials/personal.png"> <br><br>
<input type="text" name="nama" placeholder="Username" class="form-control"><br>
<input type="password" name="password" placeholder="Password" class="form-control"><br>
<input type="submit" name="submit" value="Login" class="btn btn-success">
</form>
</div>
</center>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Batal</button>
</div>
</div>
</div>
</div>
</div>Hasilnya :
Itu hannya contoh sederhana, bisa kita kreasikan supaya lebih keren, coba juga Artalopa-r HTML Live Editor.
Cukup sekian, semoga jelas.
Bootstrap Form dan Modal - Apa itu modal? tentunya yang saya maksud di sini bukanlah modal berupa uang, melainkan semacam window atau jendela yang muncul ketika kita mengklik suatu tombol pada halaman web. Bisa kita manfaatkan untuk membuat form login yang keren misalnya.
Secara default, modal terbagi menjadi tiga bagian. Yaitu modal-header, modal-body, dan modal-footer.
Saya akan berikan contoh modal sederhana, misalnya :
<div class="container">
<h2>Contoh Modal</h2>
<!-- Trigger modal dengan button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Buka Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-md">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Beberapa teks dalam modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Tutup</button>
</div>
</div>
</div>
</div>
</div>Pada bagian yang saya tandai, yaitu data-target, value-nya menyesuaikan dengan id yang saya tandai, atau sebaliknya.
Untuk modal-md saya tandai karena opsional. Kalian bisa menggantinya dengan modal-sm untuk ukuran small atau modal-lg untuk ukuran large. Secara default jika tidak diberi sizenya adalah modal-md
Misal kita mau membuat form login yang keren. Logikanya, form login tersebut hanya muncul saat user mengklik tombol "login", kita bisa memasukkan form login tersebut kedalam modal. Misalnya :
<div class="container">
<!-- Trigger modal dengan button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Login!</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-md">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Mohon login terlebih dahulu!</h4>
</div>
<div class="modal-body">
<center>
<div class="form-group">
<form>
<img src="http://www.speedstudyforbusiness.com/images/testimonials/personal.png"> <br><br>
<input type="text" name="nama" placeholder="Username" class="form-control"><br>
<input type="password" name="password" placeholder="Password" class="form-control"><br>
<input type="submit" name="submit" value="Login" class="btn btn-success">
</form>
</div>
</center>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Batal</button>
</div>
</div>
</div>
</div>
</div>Hasilnya :
Itu hannya contoh sederhana, bisa kita kreasikan supaya lebih keren, coba juga Artalopa-r HTML Live Editor.
Cukup sekian, semoga jelas.
Posting Komentar