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 -->
</div>

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.