Tutorial Bootstrap Modal

tutorial-bootstrap-modalKita akan mencoba javascript bootstrap dan untuk tutorial kali ini bagaimana menggunakan salah satu fitur popup dialog, dengan menggunakan modal bootstrap.

Fitur Modal dalam Bootstrap ini akan memberikan efek popup dialog, artinya window tersebut akan muncul, tanpa harus meninggalkan halaman yang sedang dibuka.

Persis layaknya sebuah pop-up window, yang didalamnya bisa berisi informasi, link, gambar atau yang lainnya.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap Modal</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
</head>
<body>
    <!-- tombol luncurkan popup/ modal -->
    <div class="container">
        <div class="row">
            <div class="col-md-4"></div>
            <div class="col-md-4">
                <h2>Contoh Modal Bootstrap</h2>
                <hr>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalku">Klik Tombol!</button>
            </div>
            <div class="col-md-4"></div>
            <div class="modal fade" id="modalku" tabindex="-1" role="dialog" aria-labelledby="modal-label">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Tutup"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="modal-label">Judul Modal</h4>
                        </div>
                        <div class="modal-body">
                            <p>Tutorial ini dibuat oleh <a href="http://www.yellowweb.id" target="_blank">YELLOWWEB</a> berdasarkan sumber dari situs <a href="http://getbootstrap.com/javascript/#modals" target="_blank">Bootstrap.com</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Yang kalian harus perhatikan adalah harus terdapat file library jquery.js dan bootstrap.js agar modal tersebut bisa berfungsi.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>

Untuk tutorial disini menggunakan bootstrap CDN, artinya source file jquery.js dan bootstrap.js bisa diakses ketika ada koneksi internet.

tutorial-bootstrap-modal-1

Ketika tombol diklik maka hasilnya akan seperti berikut:

tutorial-bootstrap-modal-2.jpg

Nah teman-teman silahkan mencobanya, sampai bertemu kembali di artikel berikutnya.

Comments are closed.