Modal
Liman eklentileri üzerinde kolay bir biçimde modal (açılır pencere) oluşturmanın yolları.
Modal Componenti
Modal componenti, karmaşık akışları kolaylaştırmak ve sayfa içinde görünmesini istemediğimiz yapılar için kullanılabilecek bir bileşendir.
- Kullanıcıdan girdi alınması
- Kullanıcıya veri detayı gösterilmesi
Modal düğmesi componentini kullanarak oluşturduğunuz modalları açabilirsiniz. Aşağıdaki şekilde kullanılabilmektedir.
@include("modal-button", [
"text" => "Örnek Modal Aç",
"class" => "btn-primary",
"target_id" => "exampleModalWindow"
])
Parametre | Açıklama |
text | Modal açma düğmesinin üzerinde yazacak yazı |
class | Düğmeye ait olan class parametresi |
target_id | Açılması istenilen modalın id değeri |
Modallar düğme ile açılabildiği gibi sizin belirlediğiniz özel Javascript eventleri, fonksiyonları ile de açılabilmektedir.
// Modal göster
$("#<MODAL_IDSI>").modal("show");
// Modal gizle
$("#<MODAL_IDSI>").modal("hide");
Örnek bir modal oluşturmak için aşağıdaki yapıyı kullanabilirsiniz. @component ve @endcomponent tagları içerisinde kalan kısma checkbox, radio button, input, selectbox ve diğer tüm HTML elementlerini istediğiniz gibi yerleştirerek modal içeriğini oluşturabilirsiniz.
@component("modal-component", [
"id" => "exampleModalWindow",
"title" => "Örnek Modal",
"notSized" => true,
"modalDialogClasses" => "classExample",
"footer" => [
"class" => "btn-danger",
"onclick" => "modalDialogEvent()",
"text" => "What to do"
]
])
<input type="text" name="username" id="username_field" class="form-control">
<small>Eklemek istediğiniz kullanıcı adını giriniz</small>
<div class="mb-3"></div>
<input type="password" name="password" id="password_field" class="form-control">
<small>Kullanıcı şifresini giriniz</small>
@endcomponent
Parametre | Açıklama | Veri Tipi |
id | Modala ait olan id değeri. Benzersiz şekilde belirlenmelidir. | |
title | Modalda görünecek başlık değeri. | |
notSized | Boyut geniş mi dar mı olacak belirlediğimiz değer. | |
modalDialogClasses | Modal üzerine eklenmek istenen class değerleri. | |
footer | Modal içerisindeki düğmelerin bulunduğu alt kısım. | |
footer->class | Düğmeye ait class değeri. (Renkler için kullanıyoruz) | |
footer->onclick | Tıklandığında gerçekleştirilecek işlem. | |
footer->text | Butonda görünecek yazı. | |
Yukarıdaki örnekte iki adet input tanımlamıştık. Bir tanesinde kullanıcı adı, diğerinde ise şifre isteniyordu. Bunları kullanıcı tarafından alarak üzerinde nasıl işlem yaparız gelin bakalım.
function modalDialogEvent() {
showSwal("{{__('Yükleniyor...')}}", 'info');
let data = new FormData();
// exampleModalWindow modalının içerisinden username_field idsine sahip
// inputtan değeri alıyor ve gönderdiğimiz requestin içerisine ekliyoruz.
data.append("username", $("#exampleModalWindow").find("#username_field").val());
// benzer bir işlemi şifre için de yapıyoruz
// bu gönderdiğimiz değişkenlere controller tarafında
// request() yardımcı fonksiyonu ile erişeceğiz.
// örnek: request("password");
data.append("password", $("#exampleModalWindow").find("#password_field").val());
request("{{API('add_user')}}", data, function(response){
// işlem yapıldıktan sonra modal penceresini gizle.
$("#exampleModalWindow").modal("hide");
// Yükleniyor mesajını işlem bittiği için kapatıyoruz.
Swal.close();
// modal içerisindeki input değerlerini eski haline getiriyoruz.
$("#exampleModalWindow").find("input").val("");
response = JSON.parse(response);
// Başarılı olduğuna dair 2.5 saniyelik bir mesaj gösteriyoruz.
showSwal(response.message, 'success', 2500);
}, function(error){
error = JSON.parse(error);
showSwal(error.message, 'error');
});
}
Last modified 2yr ago