Assalammualaikum Wr. Wb.

Modal atau di sebut juga pop up, sekarang sangat banyak di gunakan di website-website karena sangat memudahkan pengguna. Dengan adanya modal dalam suatu website maka akan menghemat tempat, karena tidak perlu pindah ke halaman selanjutnya, tetapi memunculkan isi konten berbentuk pop-up. Selamat mencoba .

Framework CSS Bootstrap telah menyediakan fitur modal, modal pada Bootstrap mempunyai beberapa ukuran. Ukuran dari modal tersebut dapat di gunakan sesuai kebutuhan. Ukuran modal pada Bootstrap ada yang large, small dan standar (medium).  Dan ingat sebelum melanjutkan tutorial ini harus telah memiliki framework CSS Bootstrap dan juga telah menyusun struktur foldernya.

1. Small modal

Pertama kita membuat small modal pop-up, ini merupakan modal terkecil pada bootstrap. Perlu di ketahui bahwa modal pada bootstrap memiliki animasi berbentuk fade. Dan untuk membuat modal pada Bootstrap tidak perlu di gunakan CSS tambahan, tetapi dapat di tambahkan jika ingin di percantik.

HTML

<div class="container">
	<!-- Small modal -->
	<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

	<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
		<div class="modal-dialog modal-sm">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
					<div class="modal-body">
						...
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
						<button type="button" class="btn btn-primary">Save changes</button>
					 </div>
				</div>
			</div>
		</div>
	</div>

pertama membuat button yang memiliki data target class .bs-example-modal-sm , yang mengarah pada class  .bs-example-modal-sm yang berada pada di bawahnya. dan pada contoh ini isi kontennya di kosongkan.

Running

2. Standard modal (Medium)

Ini merupakan modal berukuran standard atau medium pada bootstrap. modal ini memiliki ukuran sedikit lebih besar dari pada small modal,

HTML

<div class="container">
	<!-- Standard modal -->
	<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-md">Standard modal</button>

	<div class="modal fade bs-example-modal-md" tabindex="-1" role="dialog" aria-labelledby="myStandardModalLabel">
		<div class="modal-dialog modal-md">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
					<div class="modal-body">
						...
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
						<button type="button" class="btn btn-primary">Save changes</button>
					 </div>
				</div>
			</div>
		</div>
	</div> 
</div>

pertama membuat button yang memiliki data target class .bs-example-modal-md , yang mengarah pada class  .bs-example-modal-md yang berada pada di bawahnya. dan pada contoh ini isi kontennya juga di kosongkan.

Running

3. Large modal (Medium)

Ini merupakan modal berukuran Besar pada bootstrap. modal ini memiliki ukuran paling besar pada Bootstrap

HTML

<div class="container">
	<!-- Large modal -->
	<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

	<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
	  <div class="modal-dialog modal-lg">
		<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
					<div class="modal-body">
						...
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
						<button type="button" class="btn btn-primary">Save changes</button>
					 </div>
				</div>
			</div>
	  </div>
	</div>
</div>

pertama membuat buuton yang memiliki data target class .bs-example-modal-lg , yang mengarah pada class  .bs-example-modal-lg yang berada pada di bawahnya. dan pada contoh ini isi kontennya juga di kosongkan.

Running

Demo

terimakasih telah melihat tutorial dari saya, nantikan tutorial bootstrap selanjutnya dari saya.