Bootstrap derslerimize devam ediyoruz.Bu derste js alert da olduğu gibi bir uyarıyı bootstrap da yapmayı göreceğiz.Bunun için kullanacağımız method
modal .
İndir : http://ustaderslik.com/dosya/bootstrap-modal.zip
İncele : http://ustaderslik.com/ornek/bootstrap-modal/
Kullanımına geçecek olursak önce kodları yazıp ardından inceleyelim.
<div class="modal" id="u1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Başlık</h4>
</div>
<div class="modal-body">
<p>İçerik</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Kapat</button>
</div>
</div>
</div>
</div>
Kalıp bu şekilde.Öncelikle
modal classına sahip div oluşturuyoruz.Bu divin içine öncelikle
modal-dialog classına ait bir div,onun içine ise
modal-content classına sahip bir div daha koyuyoruz.Bu şekilde yapımız hazır.modal-content içine ise 3 div ekleyip temel şekli oluşturuyoruz.
modal-header başlık için.
modal-body içerik için.
modal-footer butonlar için.Bu şekilde uyarı alanımızı tamamlıyoruz.
Ufak ek detaylara değinecek olursak.Classı modal olan ana divimize
fade classınıda vererek animasyonlu açtırabiliriz.Uyarıyı kapatmak için her hangi bir butona
data-dismiss="modal" parametresini vermemiz yeterli.
Uyarı kutumuz standar olarak orta boydur.Bunu büyültebilir veya küçültebiliriz.
modal classına sahip dive
bs-example-modal-lg classını.
modal-dialog classına sahip dive
modal-lg vererek büyülte biliyoruz.Küçültmek için ise aynı işlemleri yapıp lg yerine sm yazıyoruz.
Oluşturma bu şekildeydi.Göstermek için ise jquery de
$("seçici").modal('show');
uygulayıp gösterebiliyoruz.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
$("#uyari-1").click(function(){ $("#u1").modal('show'); })
$("#uyari-2").click(function(){ $("#u2").modal('show'); })
$("#uyari-3").click(function(){ $("#u3").modal('show'); })
})
</script>
<title>UstaDerslik.com</title>
<style type="text/css">
.ortala{width:100%;max-width:400px;margin:auto;margin-top:75px;}
</style>
</head>
<body>
<div class="ortala">
<button id="uyari-1">Uyarı</button>
<button id="uyari-2">Büyük uyarı</button>
<button id="uyari-3">Küçük uyarı</button>
</div>
<div class="modal" id="u1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Başlık</h4>
</div>
<div class="modal-body">
<p>İçerik</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Kapat</button>
</div>
</div>
</div>
</div>
<div class="modal fade bs-example-modal-lg" id="u2">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Başlık</h4>
</div>
<div class="modal-body">
<p>Büyük Boy</p>
</div>
</div>
</div>
</div>
<div class="modal fade bs-example-modal-sm" id="u3">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Başlık</h4>
</div>
<div class="modal-body">
<p>Küçük Boy</p>
</div>
</div>
</div>
</div>
</body>
</html>
Görüntüsü :
UstaDerslik
