Bootstrap 4 Modal Kullanımı

Bootstrap Modal Bileşeni Lightbox'lar, kullanıcı bildirimleri veya tamamen özel içerik için sitenize iletişim kutuları eklemek üzere Bootstrap'in JavaScript kalıcı eklentisini mevcut kütüphane içinden projenize dahil eder.
Bootstrap Modal kullanımı oldukça basittir, üye giriş alanlarının yapımında tekli resim büyütmelerinde, popup yapımında ve daha birçok yerde kullanılabilir.
Modal Bileşenini çalıştırmak İçin Buton yadanesnelere data-toogle ve data-target atamalarını yapmanız gerekir

<!-- Butonu Tetikleyici olarak kullanmak-->

	<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#exampleModal"> Demoyu çalıştır</button>

Modal bileşeninin gövdesini ekleyelim

<div id="exampleModal" class="modal fade" style="display: none;" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 id="exampleModalLabel" class="modal-title">Modal title</h5>
					<button class="close" type="button" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button></div>

					<div class="modal-body"> ...</div>

					<div class="modal-footer"> <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button> <button class="btn btn-primary" type="button">Save changes</button></div>
				</div>
			</div>
		</div>

Bootstrap modal animasyon olarak fade öntanımlı gelir. Bu animasyon soluklaşarak açılıp kapanan bir stildedir. Kapatmak İçin modal stilinden sonraki fade stilini kaldırın.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true"> ...</div>

Bootstrap Modal Bileşeni Lightbox'lar, kullanıcı bildirimleri veya tamamen özel içerik için sitenize iletişim kutuları eklemek üzere Bootstrap'in JavaScript kalıcı eklentisini mevcut kütüphane içinden projenize dahil eder.

Bootstrap Modal kullanımı oldukça basittir, üye giriş alanlarının yapımında tekli resim büyütmelerinde, popup yapımında ve daha birçok yerde kullanılabilir.

Modal Bileşenini çalıştırmak İçin Buton yadanesnelere data-toogle ve data-target atamalarını yapmanız gerekir

<p></p>

Mobil sitelerde modal genişliklerini piksel yerine  % cinsinden verebilirsiniz.

Bootstrap modal hakkındaki sorularınızı aşağıdaki yorum kısmından iletebilirsiniz.

 

Dikey olarak ortalı bir modal elde etmek isterseniz  modal-dialog stilinden sonra yandaki kod gibi  modal-dialog-centered stilini yazmanız yeterli. class="modal-dialog modal-dialog-centered"

E.Albayrak

0 Yorum

Soru & Yorum


Web Tasarım

Renkli Kare

Web Tasarım Ajansı