Modal

Liman eklentileri üzerinde kolay bir biçimde modal (açılır pencere) oluşturmanın yolları.

Modal componenti nedir?

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

Nasıl kullanılır?

Modal açmak

Modal düğmesi

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

Javascript ile modal açmak

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");

Modal oluşturmak

Ö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ı.

Modaldan değer almak

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');
    });
}