Bootstrap Ders-13 Uyarılar - Modal
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Bootstrap Ders-13 Uyarılar - Modal

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(3573)
RAPOR ET
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">&times;</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">&times;</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">&times;</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">&times;</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ü :
http://ustaderslik.com/resim/ders/asd212xc0ew5.png



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol