Skip to content

Instantly share code, notes, and snippets.

@bwlng

bwlng/reveal_content.html

Created June 28, 2013 20:59
Show Gist options
  • Save bwlng/5888066 to your computer and use it in GitHub Desktop.
Save bwlng/5888066 to your computer and use it in GitHub Desktop.
Download ZIP
Use a single modal and fill it w/ content from throughout the site.
Raw
reveal_content.html
<!doctype html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<div class="container">
<a href="#" data-reveal-content="myContent" data-reveal-id="myModal" class="reveal-link">Click Me For A Modal</a>
<div style="display:none" id="myContent">
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
<a class="close-reveal-modal">&#215;</a>
</div>
</div>
<div class="reveal-modal" id="myModal"></div>
<script>
document.write('<script src=' +
('__proto__' in {} ? '/assets/js/vendor/zepto' : '/assets/js/vendor/jquery') +
'.js><\/script>')
</script>
<script src="/assets/js/foundation/foundation.js"></script>
<script src="/assets/js/foundation/foundation.reveal.js"></script>
<script>
$(document).foundation();
$('[data-reveal-content="myContent"]').bind('click', function(){
var modalContentContainer = $(this).attr('data-reveal-content');
var modalContent = $('#' + modalContentContainer).html();
$('#myModal').bind('opened', function() {
$(this).html(modalContent);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment