|
BootStrap web sayfası tasarlayanlar için aşina olacağınız bir kütüphanedir. Açık kaynak koda sahip olan bu kütüphane ile web sayfalarını birkaç satırda şenlendirebiliriniz. Web sayfalarında kullanılan özelliklerden biri de açılan pencere uygulamasıdır. Bootstrap 3 ile dialog penceresi kullanılırken 4 ve 5 versiyonlarında modal penceresi kullanılmaktadır. Bu uygulamamızda bootstrap 4 kütüphanesiyle kullanılan modal pencresinin nasıl aktif hale getirildiği ve pencerede yer alan bir butona nasıl olay yazıldığı konusu yapılacaktır.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function () {
$("#myBtn").click(function () {
$("#myModal").modal("show");
});
$("#myModal").on('show.bs.modal', function () {
$("#kapat").click(function () {
alert("Kapatılıyor");
});
});
});
</script>
</head>
<body>
<div class="container mt-3">
<h2>Modal Olayı - show.bs.modal</h2>
<button type="button" class="btn btn-primary" id="myBtn">Aç</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Header</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Bu <strong>show.bs.modal</strong> olayı jquery kodlarıyla pencerenin gösterilmesi ve içinde nesnelere ulaşılması için kullanılır.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal" id="kapat">Kapat</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|