OI Modals

This is a demonstration and test of the many ways to trigger and determine the content for modals within Opportunity International's front-end framework. The library has jQuery and Weavr as dependencies.

Basic Modal

To create a basic modal, you simply

Add the markup to your document.
Add a data-modal attribute to the element that should trigger the modal.
Initialize the trigger with some Javascript.

Basic modal

Example:



Basic modal

Dynamic content

You can also create modals with dynamic content by declaring them with a bit of Javascript.

Dynamic content

Example:


Dynamic content

iFrame Content

If the data-modal attribute is a URL, the URL will be loaded in an iframe in the modal. If the URL is a Vimeo or YouTube embed URL, it will be displayed in a 16:9 widescreen format. Otherwise it defaults to a 4:3 format.

iframe modal Video modal

Example:


iframe modal

Video modal

Fullscreen Modals

Modals can be displayed "fullscreen" (i.e. full viewport), making them more like an overlay.

Fullscreen modal

Modal Sizes

By default, modals are 400px wide. Other sizes can be set by adding one of Weavr's container classes, such as .contained-12, .contained-9,.contained-6, etc.

Because modals are sized with classes, you have the freedom to define additional sizes by creating your own classes in your stylesheets.

Normal Modal Medium Modal Large Modal X-large Modal

Callback functions

You can declare callback functions to execute before and after a modal closes or opens. You can prevent a modal from opening or closing by returning false from the beforeOpen() and beforeClose() callbacks, respectively.

Try me

Open via Javascript

Modals can also be opened via Javascript instead of being attached to click event handlers.

Lightbox Galleries

Create lightbox-style galleries with OI Lightbox (built on top of OI Modals). Put the image URL in the href attribute, and use the rel attribute to group images into galleries.

Photo 1 | Photo 2 | Photo 3 | Photo 4

Heading heading heading!

Raw denim PBR letterpress, 8-bit aesthetic narwhal Schlitz normcore iPhone Blue Bottle vinyl retro. Fanny pack jean shorts cardigan, organic VHS Etsy quinoa gluten-free pour-over swag craft beer Pinterest. Mlkshk tousled squid banjo, tilde sartorial selfies messenger bag cred Marfa skateboard fanny pack Kickstarter four dollar toast. Lo-fi skateboard stumptown Pinterest craft beer iPhone. Master cleanse street art pour-over, literally sustainable kogi Marfa try-hard cray cliche Intelligentsia organic. Narwhal Neutra High Life gentrify food truck, lomo semiotics. Stumptown asymmetrical distillery American Apparel narwhal authentic listicle mustache farm-to-table Portland trust fund Wes Anderson.

Mlkshk roof party gentrify kale chips meh pug. Keytar mlkshk gastropub, DIY lumbersexual readymade mixtape roof party sustainable fixie. Irony crucifix locavore Portland Intelligentsia. American Apparel Vice selvage, gentrify salvia Schlitz ethical pickled try-hard squid tattooed trust fund bespoke kitsch Godard. Portland cornhole blog trust fund photo booth. Artisan lomo direct trade pop-up, four loko taxidermy iPhone. Fashion axe aesthetic disrupt fanny pack bespoke, heirloom 3 wolf moon you probably haven't heard of them Intelligentsia listicle banjo.

Brooklyn sriracha stumptown pour-over authentic. Sriracha food truck Tumblr four dollar toast migas Schlitz crucifix, gentrify chia trust fund twee. Actually Echo Park cliche, beard cronut salvia twee swag. Pop-up aesthetic master cleanse meditation distillery, flannel Banksy. Quinoa Echo Park scenester Austin, pug selfies seitan gentrify PBR&B Brooklyn vegan Wes Anderson freegan single-origin coffee umami. Disrupt street art Godard, lumbersexual occupy pour-over vegan cardigan mixtape Carles Pitchfork migas aesthetic four dollar toast. Craft beer art party disrupt taxidermy tattooed.

You probably haven't heard of them normcore PBR Tumblr, pug sriracha 8-bit Odd Future Carles ethical lomo keffiyeh Blue Bottle PBR&B. Bitters chambray Vice street art, Pinterest chillwave PBR&B irony hella drinking vinegar Banksy fanny pack. Gentrify DIY kale chips, raw denim meditation distillery selvage scenester Kickstarter hoodie seitan heirloom flannel pickled. 3 wolf moon you probably haven't heard of them cray, Marfa literally narwhal DIY shabby chic. Ennui XOXO distillery occupy paleo, readymade bespoke keytar street art bitters. Farm-to-table try-hard meh craft beer XOXO polaroid Banksy. Pop-up mumblecore VHS, hashtag pour-over health goth food truck pickled Bushwick meh cliche beard lo-fi fashion axe semiotics.

Mumblecore master cleanse put a bird on it, pop-up lumbersexual Kickstarter fanny pack heirloom Vice meditation chambray fashion axe meh church-key. Photo booth kogi literally cronut fixie. Vinyl deep v Tumblr drinking vinegar Neutra, keytar scenester raw denim vegan mustache try-hard sartorial. Mixtape tattooed Neutra, Shoreditch meh leggings normcore cray fixie skateboard sartorial. Single-origin coffee narwhal lo-fi ugh. Stumptown messenger bag heirloom, cornhole PBR&B mumblecore occupy umami four loko. Fingerstache cliche pop-up XOXO.

Sriracha Helvetica Carles aesthetic cray. Crucifix pickled artisan cold-pressed. Sartorial cornhole selfies plaid Portland, synth biodiesel 90's normcore listicle you probably haven't heard of them. Deep v American Apparel four loko seitan meditation. 8-bit put a bird on it viral Godard blog. Bespoke pork belly kitsch Banksy put a bird on it, health goth Thundercats viral next level four dollar toast DIY. Butcher cardigan blog fixie.

OI Modals

Basic Modal

Example:

Dynamic content

Example:

iFrame Content

Example:

Fullscreen Modals

Modal Sizes

Callback functions

Open via Javascript

Lightbox Galleries

Donate to Opportunity

This is a normal modal

This is a medium modal

This is a large modal

This is an extra large modal

Heading heading heading!

Modal Callback Demo

Javascript Trigger