> For the complete documentation index, see [llms.txt](https://docs.liman.dev/eklenti-gelistirme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.liman.dev/eklenti-gelistirme/sandbox/modal.md).

# Modal

## Modal componenti nedir?

![Modal Componenti](/files/-MgeKv4Q_ooH96SgY7eT)

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.

```php
@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.

```javascript
// 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.

```php
@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.

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