Skip to content
A framework agnostic javascript modal dialog library
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Reticle.js is a framework agnostic modal library designed for simplicity.

It should support as far back as IE6, but as this is still in early stages I haven't had a chance to test yet.

##Initialization Include reticle.js and reticle.css in your document/pipeline of course.

Then set up your modal content markup.

<div id="my-modal">
  <p>This content will be wrapped with the necessary reticle css upon initialization.

Then initialize reticle with this content.

//To initialize a new modal, which applies the necessary reticle.css classes to your div,
// just provide the DOMElement reference for your div with your modal's unique ID. 
//   (maybe this should just take the id){
  content: document.getElementById('my-modal')

//To bind some buttons as well{
  buttonClass: 'my-modal-button'
  content: document.getElementById('my-modal')

##Manipulation If you'd like to programmatically show/hide/bind things about the modal, rather than relying on the simple button-click bind provided by default, these helper methods are available after initialization.

There are two ways to reference your reticle instance. Use whichever fits your needs of course.

####Global Helper Methods You can pass your modal's ID to static helper methods to call public API functions.

//Show your initialized modal'my-modal');

//Hide your initialized modal

//Bind a button to show your modal

####Standard Object Methods And since returns a new reticle object, you can store that and reference it however you like.

var reticle_one ={content: document.getElementById('my-modal')});


You can’t perform that action at this time.