lodge.js

A small javascript library for modals, embeds, and passing events around like prison cigarettes. By @jessevondoom.

Lodge is intended to bring consistency in interaction to the little workflows we often reinvent — modals, quick forms, embeds, even checkout flow. The idea is a single lightweight library that can provide simplified modal content, securely synchronize events between windows, and generally make working bite-sized functionality much simpler.

Quick links

Demos

Take a look at the boxes below. Each is an iframe of the same embed. The first plain, the second with a minor CSS overwrite, the third hosted on a different domain. Click one.

Features

Easily create iframe embeds with secure cross-window event relays
A universal and responsive
Debug mode to help see what's happening while you build
Override CSS of embeds with a simple data attribute
Automatically show videos in a modal overlay (optional)
Request simple user input with generated modal forms

Quick usage overview

Embeds are created with a single line of code:
<embed class="lodge" src="embed.html">

To force an override of the embed's CSS rules, just add a data attribute:
data-css=".logo{color:#a00;}"

Want to use different styles for an embed and a modal? No problem. Just add CSS. Look for these classes situationally added to the main html element:
.vv-embed, .vv-modal

It's all event driven, and Lodge will tell you when it's ready: window.lodge.events.add(vv,'ready', function(e) { // ...do something });