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(4204)
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




akifguldemir
akifguldemir 59 Gün Önce Cevaplandı
Merhahabalar

Projemi geliştirirken resme ait yorumları bir modal içerisinde göstermek istiyorum fakat id yi gönderemedim..Yardımcı olursanız sevinirim.



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