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

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

jschr/bootstrap-modal
=====================

Extends the default Bootstrap Modal class. Responsive, stackable, ajax and more.

2.2.6(11y ago)5.0k39.6k↓82.2%1.1k[96 issues](https://github.com/jschr/bootstrap-modal/issues)[14 PRs](https://github.com/jschr/bootstrap-modal/pulls)1Apache License 2.0JavaScript

Since Jan 26Pushed 7y ago243 watchersCompare

[ Source](https://github.com/jschr/bootstrap-modal)[ Packagist](https://packagist.org/packages/jschr/bootstrap-modal)[ Docs](https://github.com/jschr/bootstrap-modal.git)[ RSS](/packages/jschr-bootstrap-modal/feed)WikiDiscussions master Synced 3w ago

READMEChangelog (1)DependenciesVersions (4)Used By (1)

**Note**: Since this plugin was created to solve a lot of the issues with BS2, it still uses the BS2 markup syntax. Currently I believe the default BS3 modal addresses some of the bigger issues and is not worth maintaining two versions of this plugin.

Bootstrap Modal v2.2.6
======================

[](#bootstrap-modal-v226)

See live demo [here](http://jschr.github.com/bootstrap-modal/).

Extends Bootstrap's native modals to provide additional functionality. Introduces a **ModalManager** class that operates behind the scenes to handle multiple modals by listening on their events.

A single ModalManager is created by default on body and can be accessed through the jQuery plugin interface.

```
    $('body').modalmanager('loading');
```

Bootstrap-Modal can be used as a replacement for Bootstrap's Modal class or as a patch to the library.

Bootstrap 3
-----------

[](#bootstrap-3)

If you're using BS3, I've provided a compatible css patch. Include `bootstrap-modal-bs3patch.css` **before** the main `bootstrap-modal.css` file to use this plugin with Bootstrap 3.

If you're using the loading spinner functionality you may also need to change the default template to be compatible in js:

```
    $.fn.modal.defaults.spinner = $.fn.modalmanager.defaults.spinner =
        '' +
            '' +
                '' +
            '' +
        '';
```

Overview
--------

[](#overview)

- Backwards compatible
- Responsive
- Stackable
- Full width
- Load content via AJAX
- Disable background scrolling

Installation
------------

[](#installation)

- Include `css/bootstrap-modal.css` after the main bootstrap css files.
- Include `js/bootstrap-modalmanager.js` and `js/bootstrap-modal.js` after the main bootstrap js files.

```

```

Options
-------

[](#options)

In addition to the standard bootstrap options, you now have access to the following options

**Modal**

- **width**Set the initial width of the modal.
- **height**Set the initial height of the modal.
- **maxHeight**Set the max-height of the modal-body.
- **loading**Toggle the loading state.
- **spinner**Provide a custom image or animation for the loading spinner.
- **backdropTemplate**Provide a custom modal backdrop.
- **consumeTab**Used to enable tabindexing for modals with `data-tabindex`. This is set to true by default.
- **focusOn**The element or selector to set the focus to once the modal is shown.
- **replace**If set to true, the modal will replace the topmost modal when opened.
- **attentionAnimation**Set the animation used by the `attention` method. Any animation in [animate.css](http://daneden.me/animate/) is supported but only the *shake* animation is included by default.
- **modalOverflow**Set this property to true for modals with highly dynamic content. This will force the modal to behave as if it is larger than the viewport.
- **manager**Set the modal's manager. By default this is set to the `GlobalModalManager` and will most likely not need to be overridden.

**ModalManager**

- **loading**Toggle the loading state.
- **backdropLimit**Limit the amount of backdrops that will appear on the page at the same time.
- **spinner**Provide a custom image or animation for the loading spinner.
- **backdropTemplate**Provide a custom modalmanager backdrop. This backdrop is used when `$element.modalmanager('loading')` is called.

Getting a reference to the modal manager
----------------------------------------

[](#getting-a-reference-to-the-modal-manager)

If you did not created your own ModalManager, perhaps you'll need a reference to it. That can be easily accomplished using the following snippet:

```
	var modalManager = $("body").data("modalmanager");
	var openModals = modalManager.getOpenModals();
	modalManager.removeLoading();
```

After that, you'll be able to call any methods that modal manager has, such as:

- removeLoading (remove the loading and backdrop window);
- getOpenModals (to get the modals that are already open);
- etc;

Disable Background Scrolling
----------------------------

[](#disable-background-scrolling)

If you want to prevent the background page from scrolling (see [demo](http://jschr.github.com/bootstrap-modal/) for example) you must wrap the page contents in a ``. For example:

```

		  ...
		  ...

```

The reason for doing this instead of just simply setting `overflow: hidden` when a modal is open is to avoid having the page shift as a result of the scrollbar appearing/disappearing. This also allows the document to be scrollable when there is a tall modal but only to the height of the modal, not the entire page.

Constrain Modal to Window Size
------------------------------

[](#constrain-modal-to-window-size)

You can bind the height of the modal body to the window with something like this:

```
    $.fn.modal.defaults.maxHeight = function(){
        // subtract the height of the modal header and footer
        return $(window).height() - 165;
    }
```

**Note:** This will be overwritten by the responsiveness and is only set when the modal is displayed, not when the window is resized.

Tab Index for Modal Forms
-------------------------

[](#tab-index-for-modal-forms)

You can use `data-tabindex` instead of the default `tabindex` to specify the tabindex within a modal.

```

```

See the stackable example on the [demo](http://jschr.github.com/bootstrap-modal/) page for an example.

[![Bitdeli Badge](https://camo.githubusercontent.com/b523d89f1dbe4001a8b88272626f53fffc8e64b254ecaad0a3c54fede68fe989/68747470733a2f2f64327765637a68766c38323376302e636c6f756466726f6e742e6e65742f6a736368722f626f6f7473747261702d6d6f64616c2f7472656e642e706e67)](https://bitdeli.com/free "Bitdeli Badge")

###  Health Score

48

—

FairBetter than 94% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity57

Moderate usage in the ecosystem

Community41

Growing community involvement

Maturity65

Established project with proven stability

 Bus Factor4

4 contributors hold 50%+ of commits

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

Total

3

Last Release

4132d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/1427241?v=4)[Adam Lynch](/maintainers/adam-lynch)[@adam-lynch](https://github.com/adam-lynch)

![](https://www.gravatar.com/avatar/3b77177c393da14a27a3d8761f78cfd16b5ba56e9ac67586415772444daad465?d=identicon)[jschr](/maintainers/jschr)

---

Top Contributors

[![adam-lynch](https://avatars.githubusercontent.com/u/1427241?v=4)](https://github.com/adam-lynch "adam-lynch (8 commits)")[![mystix](https://avatars.githubusercontent.com/u/174070?v=4)](https://github.com/mystix "mystix (6 commits)")[![george-silva](https://avatars.githubusercontent.com/u/863039?v=4)](https://github.com/george-silva "george-silva (2 commits)")[![DigTheDoug](https://avatars.githubusercontent.com/u/1428256?v=4)](https://github.com/DigTheDoug "DigTheDoug (2 commits)")[![gsouf](https://avatars.githubusercontent.com/u/3215399?v=4)](https://github.com/gsouf "gsouf (2 commits)")[![infernalslam](https://avatars.githubusercontent.com/u/15246802?v=4)](https://github.com/infernalslam "infernalslam (2 commits)")[![jahvi](https://avatars.githubusercontent.com/u/661330?v=4)](https://github.com/jahvi "jahvi (2 commits)")[![montrezorro](https://avatars.githubusercontent.com/u/2027286?v=4)](https://github.com/montrezorro "montrezorro (2 commits)")[![finspin](https://avatars.githubusercontent.com/u/2330158?v=4)](https://github.com/finspin "finspin (1 commits)")[![bitdeli-chef](https://avatars.githubusercontent.com/u/3092978?v=4)](https://github.com/bitdeli-chef "bitdeli-chef (1 commits)")[![stephanebachelier](https://avatars.githubusercontent.com/u/172615?v=4)](https://github.com/stephanebachelier "stephanebachelier (1 commits)")[![msurguy](https://avatars.githubusercontent.com/u/585833?v=4)](https://github.com/msurguy "msurguy (1 commits)")[![barmstrong](https://avatars.githubusercontent.com/u/25322?v=4)](https://github.com/barmstrong "barmstrong (1 commits)")[![brian-dennett](https://avatars.githubusercontent.com/u/1115599?v=4)](https://github.com/brian-dennett "brian-dennett (1 commits)")[![cmckni3](https://avatars.githubusercontent.com/u/735717?v=4)](https://github.com/cmckni3 "cmckni3 (1 commits)")[![dandorman](https://avatars.githubusercontent.com/u/2452?v=4)](https://github.com/dandorman "dandorman (1 commits)")[![maqnouch](https://avatars.githubusercontent.com/u/3692812?v=4)](https://github.com/maqnouch "maqnouch (1 commits)")[![dominicmartineau](https://avatars.githubusercontent.com/u/290412?v=4)](https://github.com/dominicmartineau "dominicmartineau (1 commits)")

---

Tags

bootstrapbootstrap-modalmodalmodalmanagerjavascriptbootstrapmodal

### Embed Badge

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

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

###  Alternatives

[snapappointments/bootstrap-select

The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with Bootstrap 4 support.

9.8k494.8k3](/packages/snapappointments-bootstrap-select)[nostalgiaz/bootstrap-switch

Turn checkboxes and radio buttons into toggle switches.

5.0k365.6k4](/packages/nostalgiaz-bootstrap-switch)[kartik-v/bootstrap-popover-x

Bootstrap Popover Extended - Popover with modal behavior, styling enhancements and more.

1143.6M3](/packages/kartik-v-bootstrap-popover-x)[kartik-v/yii2-dialog

An asset bundle for bootstrap3-dialog for Yii 2.0 framework.

496.4M19](/packages/kartik-v-yii2-dialog)[kartik-v/bootstrap-tabs-x

Extended Bootstrap Tabs with ability to align tabs in multiple ways, add borders, rotated titles, and more.

1021.4M1](/packages/kartik-v-bootstrap-tabs-x)[kartik-v/yii2-tabs-x

A supercharged Bootstrap tabs widget with ability to align tabs in multiple ways, add borders, rotated titles, and more.

301.4M21](/packages/kartik-v-yii2-tabs-x)

PHPackages © 2026

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