Apa sih Modal Bootstrap itu
Modal Bootstrap adalah sebuah kotak dialog atau biasa di sebut dengan popup yang berfungsi untuk menampilkan notifikasi / pemberitahuan, atau apa saja yang ingin kita tampilkan.Contoh Modal Bootstrap
Berikut ini adalah contoh model bootstrap.
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --><title> Modal Bootstrap </title><!-- Bootstrap --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--></head><body><div class="container" style="margin-top:40px"><div class="row"><h1> Modal Bootstrap </h1><!-- 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" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="modal-title">Modal title</h4></div><div class="modal-body"><p>Contoh Large Modal … </p>Belajar membuat modal bootstrap, ternyata mudah.</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><!-- 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" role="document"><div class="modal-content"><div class=" modal-header "><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class=" modal-title ">Modal title</h4></div><div class=" modal-body "><p>Contoh Small Modal … </p>Belajar membuat modal bootstrap, ternyata mudah.</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><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><!-- Include all compiled plugins (below), or include individual files as needed --><script src="js/bootstrap.min.js"></script></body></html>
Demikian cara membuat modal bootstrap, semoga bermanfaat dan selamat mencoba.
Modal Bootstrap
![Modal Bootstrap]()
Reviewed by Admin
on
11:19 AM
Rating:
No comments: