Tahukah kamu jika modal bootstrap versi 3 bisa berada di tengah halaman browser?
Bootstrap adalah salah satu framework yang digunakan untuk merancang tampilan aplikasi web. Banyak fitur-fitur yang terdapat dibootstrap, salah satunya yaitu adalah modal.
Namun modal yang terdapat di Bootstrap v.3 tidak dapat tampil di tengah-tengah secara vertical, sehingga perlu tambahan css agar modal berada ditengah-tengah halaman browser.
Siapkan sebuah file css dengan nama file modal-center.css
.vertical-alignment-helper {
display:table;
height: 100%;
width: 100%;
}
.vertical-align-center {
display: table-cell;
vertical-align: middle;
}
.modal-content {
width:inherit;
height:inherit;
margin: 0 auto;
}
Kemudian silahkan anda siapkan file html dengan nama modal.html untuk menampilkan modal
<!DOCTYPE html>
<html>
<head>
<title>Cara membuat vertical center modal bootstrap v3</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/modal-center.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="margin-top: 50px;">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Modal Center</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Modal body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Download demo DISINI
Terima kasih telah membaca materi ini yang berjudul Cara membuat vertical center modal bootstrap v3 dan jangan lupa bagikan melalui sosial media anda dengan klik icon yang berada dibawah judul materi ini.
Kritik dan saran silahkan kirim ke WhatsApp, Instagram atau Facebook.
