Membuat Modal Dialog dengan Bootstrap

Membuat Modal Dialog dengan Bootstrap
Membuat Modal Dialog dengan Bootstrap - Lama sudah waktu berlalu dan blog ini kurang diurus sehingga postingan nya juga kurang diupdate. Pada kesempatan kali ini kita akan membahasa cara membuat modal dialog menggunakan bootstrap, bootstrap memang terkenal sebagai salah satu framework-css yang digemari banyak programmer, karena dengan bootstrap pekerjaan dalam hal mendesaain web cukup terbantu.

Sebenarnya apa itu modal dialog? Yang belum tau apa itu modal, mungkin ada beberapa dari kita yang melihat popup atau tampilan form melayang di web, itulah modal, sebelumnya saya menggunakan modal untuk membuat form login mahasiswa, beberapa web juga membuat pengumuman menggunakan modal. coba kita lihat demo di bawah ini.



Oke, jika kamu sudah tau dan punya gambaraan untuk membuat modall di web, pertama buka code editor kesukaan kalian lalu copy dan paste script nya, berikut adalah kode script nya.


<!DOCTYPE html>
<html>
  <head>
    <title>Membuat Modal dengan Bootstrap</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
    <body>
       <div class="container">      
    <center><h1>Membuat Modal dengan Bootstrap</h1>
    <br/>
        <!-- Tombol tampil modal-->
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Buka Modal</button>
        <h1>www.StazyLaw.web.id</h1>
    </center>

    <!-- Mulai Modal -->
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!-- konten modal-->
            <div class="modal-content">
                <!-- heading modal -->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Bagian kepala</h4>
                </div>
                <!-- body modal -->
                <div class="modal-body">
                    <p>bagian badan modal.</p>
                </div>
                <!-- footer modal -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Tutup Modal</button>
                </div>
            </div>
        </div>
    </div>
   </div>        
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

Keterangan

Kalian bisa mengubah tulisan bagian kepala untuk mengubah header nya, bagian badan untuk mengubah body nya dan bagian Tutup Modal untuk button nya.
Selain itu kalian bisa mengubah script

<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
dengan script jquery atau bootstrap milik kalian jika kalian ingin memasang nya di localhost, script nya bisa kalian download di web resmi www.jquert.com dan www.getbootstrap.com.

1 Comments:

Komentar ini telah dihapus oleh administrator blog.


EmoticonEmoticon