Passing options to Reveal modal in Foundation via HTML

18th March, 2016 - Posted by david

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.

<div id="elem" data-reveal data-reveal-init data-options="option1: value1; option2: value2;">
<!-- modal content -->

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

Tags: foundation html javascript | david | 18th Mar, 2016 at 17:44pm | No Comments

No Comments

Leave a reply

You must be logged in to post a comment.