Membuat Pop Up Box Modal Menggunakan Bootstrap


Kali ini saya akan membahas bagaimana membuat pop up box modal menggunakan bootstrap, jika sebelumnya anda tidak mengetahui apa itu bootstrap, anda dapat mengetahuinya di postingan sebelumnya disini. Langsung saja saya praktekkan bagaimana membuat tabel menggunakan bootstrap. Disini saya mempraktekkannya menggunakan Microsoft Visual Studio 2012. Anda bisa mempraktekkanna di editor lain, seperti notepad, dreamweaver, ataupun notepad++. Pastikan anda sudah mendownload bootstrap melalui situs resminya.

1. Silahkan ketikkan source code dibawah ini :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Modal</title>
  <link rel="stylesheet" href="bootstrap-3.3.1/css/bootstrap.min.css">
</head>
<body>

<div class="container">

  <div class="page-header">
    <h1>Modal <small>Bootstrap</small></h1>
  </div>

  <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel">Sandal Jepit Pram</h4>
        </div>
        <div class="modal-body">
          <h4>Creative Studio</h4>
          <p align="justify">Untuk menyelesaikan, pada level ini adik-adik harus memilih terlebih dahulu gambar yang tampil,
               dan nantinya akan muncul kolom isian yang mana untuk mengisi jawaban adik-adik. Namun perlu diperhatikan
               disetiap penulisan jawaban adik-adik harus menuliskan jawaban sesuai Ejaan Yang Disempurnakan (EYD). Seperti
               contoh penulisan nama orang yang benar dibawah ini:<br />

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>

      </div>
    </div>
  </div>
  <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Test
  </button>
</div>

<!-- JavaScript Includes -->
<script src="bootstrap-3.3.1/js/jquery-1.11.2.min.js"></script>
<script src="bootstrap-3.3.1/js/transition.js"></script>
<script src="bootstrap-3.3.1/js/modal.js"></script>
<script src="bootstrap-3.3.1/js/tooltip.js"></script>
<script src="bootstrap-3.3.1/js/popover.js"></script>

<!-- JavaScript Test -->
<script>
    $(function () {
        $('.js-popover').popover()
        $('.js-tooltip').tooltip()
    })
</script>

</body>
</html>

Maka hasilnya seperti dibawah ini :

bootstrap2

Semoga bermanfaat 🙂

Advertisements

3 thoughts on “Membuat Pop Up Box Modal Menggunakan Bootstrap

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s