Home > Uncategorized > A Hello World example for Foundation Reveal

A Hello World example for Foundation Reveal

Foundation is a Javascript / CSS framework similar to Bootstrap, and I was looking at the Reveal plugin to create modal dialogs, but dismayed when there was no really simple “hello world” example.

First, download Foundation “complete”, and then create a HTML file with this content

<link href=”css/foundation.css” rel=”stylesheet” />
<script src=”js/vendor/modernizr.js”></script>
<script src=”js/vendor/jquery.js”></script>
<script src=”js/foundation/foundation.js”></script>
<script src=”js/foundation/foundation.reveal.js”></script>

<a href=”#” id=”btnJoin” >Join</a>

<div id=”dialogPage” class=”reveal-modal” data-reveal>
<p id=”pMessage”></p>
<a class=”close-reveal-modal”>×</a>

function init()
$(“#btnJoin”).bind(“click”, btnJoin_click);

function btnJoin_click()
jqmAlert(“Hey, I’m an alert”);

function jqmAlert(message)
console.log(“jqmAlert(” + message + “)”);
$(‘#dialogPage’).foundation(‘reveal’, ‘open’);

Categories: Uncategorized
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: