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>
