PHPackages                             zzortell/zz-ajaxpopupjs-bundle - 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. zzortell/zz-ajaxpopupjs-bundle

ActiveSymfony-bundle

zzortell/zz-ajaxpopupjs-bundle
==============================

AjaxPopup.js is a jQuery plugin which displays HTML requested by Ajax in a popup.

v1.0.1(8y ago)1281MITJavaScript

Since May 31Pushed 8y ago1 watchersCompare

[ Source](https://github.com/Zzortell/AjaxPopup.js)[ Packagist](https://packagist.org/packages/zzortell/zz-ajaxpopupjs-bundle)[ RSS](/packages/zzortell-zz-ajaxpopupjs-bundle/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (3)Used By (0)

AjaxPopup.js
============

[](#ajaxpopupjs)

AjaxPopup.js is a jQuery plugin which allows you to focus on backend when you just want to display HTML requested by Ajax in a popup.

AjaxPopup.js is able to follow links and handle form submission.

Can be used with Symfony 3 or standalone.

An example application made with Symfony 3 is available [here](https://github.com/Zzortell/AjaxPopupExample).

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

[](#installation)

### Standalone installation

[](#standalone-installation)

Download this folder: [src/Zz/AjaxPopupJsBundle/Resources/public/](https://github.com/Zzortell/AjaxPopup.js/tree/master/Resources/public).

Include jQuery in your project:

```

```

Include AjaxPopup.js:

```

```

Include AjaxPopup.css:

```

```

Don't forget to replace `...` by the installation folder.

### Symfony 3 installation

[](#symfony-3-installation)

Download via Composer:

```
composer require zzortell/zz-ajaxpopupjs-bundle
```

Enable bundle in the kernel:

```
class AppKernel extends Kernel
{
    public function registerBundles()
    {
        $bundles = [
            ...
            new Zz\AjaxPopupJsBundle\ZzAjaxPopupJsBundle(),
        ];

        ...
    }
}
```

Don't forget to install assets:

```
bin/console assets:install
# or
bin/console assets:install web --symlink --relative
```

Include jQuery in your project:

```

```

Include AjaxPopup.js:

```

```

Include AjaxPopup.css:

```

```

Usage
-----

[](#usage)

Step 1: Make AjaxPopup.js handle the request of a popup.

```

    $(document).ready(function() {
        var popup = $.AjaxPopup({
            // This is default configuration

            "overlay_color": "rgba(0,0,0,0.2)",
            "loader_color": "#3498db", // blue
            "loader_circle_color": "#f3f3f3", // light grey
            "use_loader": true,
            "loader": null, // e.g. $("#loader"),

            "open_now": null, // put an url to open on document ready
            "buttons_selector": "button[ajax-url]",

            "follow_links": true,
            "control_forms": true,
            "control_buttons": true,
        });
    } );

```

Step 2: Enjoy!

When triggered (see triggering options below), AjaxPopup requests HTML via Ajax. When the new content is received, AjaxPopup checks for buttons, links and forms and handles them according to the given options.

The server HAS TO send 200 status. A 205 status can also be send to make reload the page (usefull for login for example).

Click on the overlay or press `Echap` to close the popup.

### Settings options

[](#settings-options)

- overlay\_color: Color of the overlay, by defaut transparent grey. Set opacity to 0 to not have overlay color.
- loader\_color: Color of the default loader.
- loader\_circle\_color: Color of the circle of the default loader.
- use\_loader: If set true, will display a loader waiting for the server response.
- loader: A jQuery element. If set null, the default loader is used.

### Triggering options

[](#triggering-options)

- open\_now: Give an url to display the popup on document ready, or immediatly if modified using API.
- buttons\_selector: A jQuery selector which can refers to buttons or other elements. Each of these elements has to have a `ajax-url` attribute. Cliking on these elements will display the popup. The jQuery selector can also refers to buttons inside the popup (for example, in a login form you can put a "Register" button to make AjaxPopup load a registration form).

### Behavior options

[](#behavior-options)

- follow\_links: If set true, AjaxPopup will reload the content of the popup when the user click on a link inside the popup, with the given url. Will not follow the link if the specified `target` is not `_self`.
- control\_forms: If set true, AjaxPopup will handle form submission inside the popup and reload the content of the popup with server's response.
- control\_buttons: If set true, AjaxPopup will handle buttons inside the popup like ones outside.

### API

[](#api)

The object returned by $().AjaxPopup() has several methods:

```
popup.display(url, method = 'GET', data = null);
popup.hide();
popup.hideAll(); // Hide all popups, not only this instance.
popup.getOptions();
popup.setOptions();
```

Improve this library
--------------------

[](#improve-this-library)

This library is published under the [MIT license](https://github.com/Zzortell/AjaxPopup.js/blob/master/LICENSE).

If you find a bug, or if you want to propose a feature, please open an issue or post pull-request.

If you use this library, please let's me know!

###  Health Score

28

—

LowBetter than 54% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity10

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity64

Established project with proven stability

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

Total

2

Last Release

3266d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/0b51dd8c03ccf7ffa6feb5357c163f70da504d5cc7a137ea5481c376fc20336f?d=identicon)[Zzortell](/maintainers/Zzortell)

---

Top Contributors

[![remi-blaise](https://avatars.githubusercontent.com/u/9931240?v=4)](https://github.com/remi-blaise "remi-blaise (6 commits)")

---

Tags

ajaxajax-formajax-popuppopupsymfony3-bundleajaxpopupajax-formsymfony3-bundleajax-popup

### Embed Badge

![Health badge](/badges/zzortell-zz-ajaxpopupjs-bundle/health.svg)

```
[![Health](https://phpackages.com/badges/zzortell-zz-ajaxpopupjs-bundle/health.svg)](https://phpackages.com/packages/zzortell-zz-ajaxpopupjs-bundle)
```

###  Alternatives

[kartik-v/bootstrap-fileinput

An enhanced HTML 5 file input for Bootstrap 5.x, 4.x, and 3.x with features for file preview for many file types, multiple selection, ajax uploads, and more.

5.4k7.9M13](/packages/kartik-v-bootstrap-fileinput)[behat/mink-selenium2-driver

Selenium2 (WebDriver) driver for Mink framework

51159.1M666](/packages/behat-mink-selenium2-driver)[arrilot/laravel-widgets

A powerful alternative to view composers. Asynchronous widgets, reloadable widgets, console generator, caching - everything you can think of.

1.1k4.6M103](/packages/arrilot-laravel-widgets)[pubnub/pubnub

This is the official PubNub PHP SDK repository.

1314.6M17](/packages/pubnub-pubnub)[ziffmedia/nova-select-plus

A Nova select field for simple and complex select inputs

96578.4k1](/packages/ziffmedia-nova-select-plus)[silverstripe/mink-facebook-web-driver

Mink driver for facebook's webdriver

11518.5k2](/packages/silverstripe-mink-facebook-web-driver)

PHPackages © 2026

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