SimpleModals

Setup

Include the JS script from the dist folder.

<script src="dist/js/simplemodals.min.js"></script>
<link href="dist/css/simplemodals.min.css" rel="stylesheet">

Add js_modal_open class to elements that you want to trigger modals.
You will also need to set the data-target attribute equal to the class of the modal target you want to open when this trigger is clicked.

Some Button
Some Div

Now you will need to setup your modal targets. These targets should have classes that match the data-target attributes that were set for the triggers.

  

    

      Modal Contents
    
  

If you want to have a close trigger, just add an element with the js_modal_close class.

  

    

      More Modal Contents
    
    

      
Close
    
  

Lastly, initiate the modals like so:

<script>
  var modals = new SimpleModal();
</script>

You should now have a simple set of modals!

Options

You can change the trigger/style classes that simplemodals will look for and set. Here are the options and the defaults:

// Class applied to active modal
activeClass: 'active',

// Class to trigger modal close
closeTrigger: 'js_modal_close',

// Class to inject AJAX Promise data into
dataClass: 'js_modal_data',

// JSON key to pull data from Promise result
dataKey: 'html',

// Class applied to modal when fetching Promise data
loadingClass: 'loading',

// Class to trigger open modal
modalTrigger: 'js_modal_open',

// Class used to create modal background shade
shadeClass: 'modal-shade',

// Class used to trigger modal close on shade click
shadeTrigger: 'js_modal_shade'

Support or Contact

If you want to see how to trigger programatically or how to handle ajax content, check out the repo here: simplemodals.js. If you see a bug or have an issue, please open up a ticket. Thanks!