Passing options to Reveal modal in Foundation via HTML

In my current job, we use Foundation for stuff like modal popups, fancy drop downs etc. I haven’t used it too much but I know for the modal dialogs you can either instantiate them via Javascript ($('#elem').foundation('reveal', 'open', {option: 'value'});) or via HTML attributes (<a href="#" data-reveal-id="elem">Open</a> and <div id="elem" data-reveal>).

Passing options to Foundation via Javascript is pretty trivial, as can be viewed in the example above. However, doing this via HTML attributes isn’t so straight-forward and I found the documentation online pretty hard to find. Luckily I was able to figure it out and it’s simple enough: you add a data-reveal-init attribute and a data-options attribute on your modal div. Each of the options are separated by semi-colons and are of the format option: value, e.g.

So, as I said, easy enough in the end but finding it documented proved tircky! Hope this post helps.