PHPackages                             coercive/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. coercive/modal

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

coercive/modal
==============

Simple basic handler for Bootstrap (3 / 4 / 5) Modal

0.0.1(1y ago)014MIT

Since Mar 3Pushed 1y ago1 watchersCompare

[ Source](https://github.com/Coercive/Modal)[ Packagist](https://packagist.org/packages/coercive/modal)[ Docs](http://coercive.fr)[ RSS](/packages/coercive-modal/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (2)DependenciesVersions (3)Used By (0)

Modal
=====

[](#modal)

Simple basic handler for Bootstrap (3 / 4 / 5) Modal

History
-------

[](#history)

- First version 2015-11-09 for Bootstrap 3
- Second version 2018-06-14 for Bootstrap 4
- Third version 2022-09-30 for Bootstrap 5

JS requires
-----------

[](#js-requires)

- Bootstrap (3 / 4 / 5) with jQuery

Load
----

[](#load)

```
require('./your/path/coercive/modal/dist/Modal.js');

new Modal();
```

Basic alert
-----------

[](#basic-alert)

```
new Modal({
    id: 'MyBasicAlertModal',
    title: 'Hello',
    content: 'This is an alert',
    topCancel: true,
    cancel: 'Close',
});
```

Basic confirm
-------------

[](#basic-confirm)

```
new Modal({
    id: 'MyBasicConfirmModal',
    title: 'Hello',
    content: 'This is a confirmation request',
    topCancel: true,
    cancel: 'Cancel',
    confirm: 'Confirm',
    onConfirm: (Popup) => {

        alert('confirmed !');
        Popup.close();

    },
});
```

Basic form modal
----------------

[](#basic-form-modal)

```
new Modal({
    id: 'MyBasicConfirmModal',
    title: 'Hello',
    content: 'This is a form  ... ',
    topCancel: true,
    cancel: 'Cancel',
    confirm: 'Confirm',
    onConfirm: (Popup) => {

        //# Example of getting content Form
        let data = Popup.get().find('form').serializeArray();

        //# Example of getting form url
        let action = Popup.get().find('form').attr('action');

        //# Example of sending data
        $.ajax({
            method: 'POST',
            url: action,
            dataType: 'json',
            data: data
        }).done((json) => {

            //# Close current modal
            Popup.close();

            //# Need a confirm message ?
            new Modal({
                title: 'Hello',
                content: 'Your form has been sent',
                topCancel: true,
                cancel: 'Ok',
            });

        })

    },
});
```

Options
-------

[](#options)

### Compatibility

[](#compatibility)

Some features do not behave the same from one version of Bootstrap to another. By default version 5 is loaded.

```
new Modal({
    bootstrap: 3
});
```

### Auto open

[](#auto-open)

The modal opens by default, but you can disable it.

```
new Modal({
    open: false
});
```

### Hideable

[](#hideable)

The modal is hideable by default, but you can disable it.

```
new Modal({
    hideable: false
});
```

You can also use behavior methods in the evolution of your script.

```
let Popup = new Modal();

Popup.disable();

Popup.enable();
```

### Inject html

[](#inject-html)

```
let Popup = new Modal();

Popup.get().body(html);
```

### Add custom class or dialog class

[](#add-custom-class-or-dialog-class)

```
new Modal({
    class: 'my-custom-modal',
    dialogClass: 'modal-lg',
    confirmClass: 'example-custom-class',
    cancelClass: 'example-custom-class',
    topCancelClass: 'example-custom-class',
})
```

### Some events handler

[](#some-events-handler)

```
new Modal({
    onHide: (Popup) => {
        // do something
    },
    onHidden: (Popup) => {
        // do something
    },
    onShow: (Popup) => {
        // do something
    },
    onHide: (Popup) => {
        // do something
    },
    onCancel: (Popup) => {
        // do something
    },
    onConfirm: (Popup) => {
        // do something
    }
})
```

### Lock keyboard action

[](#lock-keyboard-action)

```
new Modal({
    backdrop: 'static',
    keyboard: false,
})
```

###  Health Score

22

—

LowBetter than 22% of packages

Maintenance32

Infrequent updates — may be unmaintained

Popularity6

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity36

Early-stage or recently created project

 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 ~468 days

Total

2

Last Release

702d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/20288080?v=4)[Coercive](/maintainers/Coercive)[@Coercive](https://github.com/Coercive)

---

Top Contributors

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

### Embed Badge

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

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

###  Alternatives

[heloufir/filament-workflow-manager

Manage your own workflows with filament

711.3k](/packages/heloufir-filament-workflow-manager)

PHPackages © 2026

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