What if your controller could respond with a modal dialog instead of a page visit? Now it can!

_{views/invoices/show.js.erb}

Popup("<%=j render @invoice %>").show('up')

Check the live demo.

Animations, styles — all included. One line gets you a fully working solution.

Perfect with Rails and its Server-generated JavaScript Responses, but not limited to them.

Installation

Rails

gem 'server-generated-popups'

Then require popup into both your styleheet and javascript files.

Any framework

Download this repo. Grab popup.js and popup.css from the assets directory and put them wherever you put JS and CSS in your framework. Follow examples in the following section, they are written to apply to any web framework.

Usage

Raise a popup from the bottom of the screen:

popup = Popup("<div>Hello</div>").show('up')

Sink the popup down through the bottom of the screen:

popup.hide('down')

Options

Your popup content needs extra padding around it to look good? Pass the value in any units:

Popup("<div>Hello</div>", {padding: '20px'})

Override width of the popup by passing the value in px:

Popup("<div>Hello</div>", {width: 300})

By default the popup will show with a close button in the top right corner and a semi-transparent backdrop beind (like this). You can disable either or both:

Popup("<div>Hello</div>", {closeButton: false, backdrop: false}).show('up')

If you need to do something after the popup slides onto the screen — pass a callback to show.

editInvoiceDetails = Popup("<%=j render @invoice %>").show('up', function (popupWindow) {
    popupWindow.style.backgroundColor = "red"
    this.hide('down')
  }
})

Development

Roadmap

• implement animations and positioning with CSS instead of Javascript
• drop jQuery dependence (use vanilla Javascript instead)

Tools

Open demo/index.html in your browser. Make changes to the code, see the results in real time.