Include the JS script from the
<script src="dist/js/simplemodals.min.js"></script> <link href="dist/css/simplemodals.min.css" rel="stylesheet">
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.
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.
If you want to have a close trigger, just add an element with the
More Modal Contents
Lastly, initiate the modals like so:
<script> var modals = new SimpleModal(); </script>
You should now have a simple set of modals!
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!