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

<html>
<head>
<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>
</head>
<body>

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

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

<script>
$(init);
function init()
{
$(document).foundation();
$(“#btnJoin”).bind(“click”, btnJoin_click);
}

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

function jqmAlert(message)
{
console.log(“jqmAlert(” + message + “)”);
$(“#pMessage”).html(message);
$(‘#dialogPage’).foundation(‘reveal’, ‘open’);
}
</script>
</body>
</html>

Advertisements
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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: