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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.liman.dev/eklenti-gelistirme/sandbox/modal.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.