PHPackages                             sslah/modal - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. sslah/modal

ActiveLibrary[Utility & Helpers](/categories/utility)

sslah/modal
===========

🚀 Modern Laravel Modal Package - Zero dependencies, Alpine.js powered, one-line installation

1.0.1(10mo ago)02MITBladePHP ^8.1

Since Jul 15Pushed 10mo agoCompare

[ Source](https://github.com/ahmetsuslu/modal-package)[ Packagist](https://packagist.org/packages/sslah/modal)[ Docs](https://github.com/ahmetsuslu/modal-package)[ RSS](/packages/sslah-modal/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependencies (3)Versions (3)Used By (0)

🚀 Laravel Modal Package
=======================

[](#-laravel-modal-package)

Modern ve responsive modal component'i. Alpine.js ile çalışır.

✅ Kurulum
---------

[](#-kurulum)

### 1. Paketi Yükle

[](#1-paketi-yükle)

```
composer require sslah/modal
```

### 2. Paketi Kur

[](#2-paketi-kur)

```
php artisan modal:install
```

### 3. Alpine.js Kurulumu (ÖNEMLİ!)

[](#3-alpinejs-kurulumu-önemli̇)

Modal paketi Alpine.js gerektiriyor. İki yöntemle kurabilirsiniz:

#### Yöntem 1: CDN (Önerilen)

[](#yöntem-1-cdn-önerilen)

```

    [x-cloak] { display: none !important; }

```

#### Yöntem 2: NPM

[](#yöntem-2-npm)

```
npm install alpinejs
```

```
// resources/js/app.js
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
```

🎯 Kullanım
----------

[](#-kullanım)

### Basit Modal

[](#basit-modal)

```

    Modalı Aç

        Başlık
        Modal içeriği

                Kapat

```

### Onay Modal'ı

[](#onay-modalı)

```

        Silme Onayı
        Bu işlem geri alınamaz!

                İptal

                Sil

```

⚙️ Özellikler
-------------

[](#️-özellikler)

### Modal Seçenekleri

[](#modal-seçenekleri)

```

```

### Keyboard Shortcuts

[](#keyboard-shortcuts)

- `ESC` - Modal'ı kapat
- `Tab` - Modal içinde navigasyon

### Modal Açma/Kapama

[](#modal-açmakapama)

```
// Modal aç
$dispatch('open-modal', 'modal-name')

// Modal kapat
$dispatch('close-modal', 'modal-name')
```

🔧 Konfigürasyon
---------------

[](#-konfigürasyon)

```
// config/modal.php
return [
    'default_size' => 'md',
    'sizes' => [
        'sm' => 'max-w-sm',
        'md' => 'max-w-md',
        'lg' => 'max-w-lg',
        // ...
    ],
    'backdrop' => [
        'closable' => true,
        'class' => 'bg-gray-500 bg-opacity-75',
    ],
];
```

🚨 Troubleshooting
-----------------

[](#-troubleshooting)

### Modal Açılmıyor

[](#modal-açılmıyor)

**Sorun:** Modal butonu çalışmıyor. **Çözüm:** Alpine.js yüklü olduğundan emin olun.

### Modal Açılıp Kayboluyor

[](#modal-açılıp-kayboluyor)

**Sorun:** Modal açılır ama içerik görünmez, sadece gri arkaplan kalır. **Çözüm:** `x-cloak` CSS'i ekleyin:

```

    [x-cloak] { display: none !important; }

```

### Console Hataları

[](#console-hataları)

**Sorun:** Alpine.js hataları. **Çözüm:** Alpine.js'in CDN'den yüklendikten sonra:

```

```

### Modal Backdrop Tıklanmıyor

[](#modal-backdrop-tıklanmıyor)

**Sorun:** Backdrop'a tıklayınca modal kapanmıyor. **Çözüm:** Config'te `backdrop.closable` true olmalı:

```
'backdrop' => [
    'closable' => true,
],
```

📝 Örnekler
----------

[](#-örnekler)

### Alert Modal

[](#alert-modal)

```

                Dikkat!

        Bu önemli bir uyarı mesajıdır.

                Anladım

```

🎨 Styling
---------

[](#-styling)

Modal'lar Tailwind CSS kullanıyor. Özel stil vermek için:

```

```

📄 Lisans
--------

[](#-lisans)

MIT License

🤝 Katkıda Bulunma
-----------------

[](#-katkıda-bulunma)

1. Fork yapın
2. Feature branch oluşturun
3. Değişikliklerinizi commit edin
4. Pull request gönderin

🔗 Bağlantılar
-------------

[](#-bağlantılar)

- GitHub:
- Packagist:

###  Health Score

29

—

LowBetter than 59% of packages

Maintenance54

Moderate activity, may be stable

Popularity2

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity46

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~0 days

Total

2

Last Release

308d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/8353ddc5d7d010c4444e582bec5492e54cb7f6efff7af9def9261aa533e1c6e2?d=identicon)[sslah](/maintainers/sslah)

---

Top Contributors

[![ahmetsuslu](https://avatars.githubusercontent.com/u/7262009?v=4)](https://github.com/ahmetsuslu "ahmetsuslu (2 commits)")

---

Tags

laraveltailwindcomponentmodalpopupvuealpinejsdialog

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/sslah-modal/health.svg)

```
[![Health](https://phpackages.com/badges/sslah-modal/health.svg)](https://phpackages.com/packages/sslah-modal)
```

###  Alternatives

[kompo/kompo

Laravel & Vue.js FullStack Components for Rapid Application Development

11812.4k21](/packages/kompo-kompo)[markwalet/nova-modal-response

A Laravel Nova asset for Modal responses on an action.

14720.0k](/packages/markwalet-nova-modal-response)[riverskies/laravel-vue-component

Helper package to aid usage of Vue Components within Laravel projects

201.2k](/packages/riverskies-laravel-vue-component)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)