|
|
|
<!DOCTYPE html> |
|
|
|
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> |
|
<!--[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 lang="en"> <!--<![endif]--> |
|
<head> |
|
<meta charset="utf-8" /> |
|
|
|
<!-- Set the viewport width to device width for mobile --> |
|
<meta name="viewport" content="width=device-width" /> |
|
|
|
<title>Reveal conflicts with Foundation navigation bar - modal does not launch from navigation bar with data-reveal-id</title> |
|
|
|
<!-- Included CSS Files --> |
|
<!-- Combine and Compress These CSS Files --> |
|
<link rel="stylesheet" href="stylesheets/globals.css"> |
|
<link rel="stylesheet" href="stylesheets/typography.css"> |
|
<link rel="stylesheet" href="stylesheets/grid.css"> |
|
<link rel="stylesheet" href="stylesheets/ui.css"> |
|
<link rel="stylesheet" href="stylesheets/forms.css"> |
|
<link rel="stylesheet" href="stylesheets/orbit.css"> |
|
<link rel="stylesheet" href="stylesheets/reveal.css"> |
|
<link rel="stylesheet" href="stylesheets/mobile.css"> |
|
<!-- End Combine and Compress These CSS Files --> |
|
<link rel="stylesheet" href="stylesheets/app.css"> |
|
|
|
<!--[if lt IE 9]> |
|
<link rel="stylesheet" href="stylesheets/ie.css"> |
|
<![endif]--> |
|
|
|
<!-- IE Fix for HTML5 Tags --> |
|
<!--[if lt IE 9]> |
|
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> |
|
<![endif]--> |
|
|
|
</head> |
|
<body> |
|
|
|
<!-- container --> |
|
<div class="container"> |
|
<div class="row"> |
|
<div class="twelve columns"> |
|
<ul class="nav-bar"> |
|
<li><a href="#" data-reveal-id="modaltest">Test modal launch with data-reveal-id</a></li> |
|
<li><a href="#" id="launch-modal">Test modal with programmatic launching</a></li> |
|
</ul> |
|
</div> |
|
</div> |
|
|
|
<!-- main --> |
|
<div class="row"> |
|
<div class="twelve columns"> |
|
<a href="#" data-reveal-id="modaltest">Test modal launch with data-reveal-id</a> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div id="modaltest" class="reveal-modal"> |
|
<h3>Test modal</h3> |
|
</div> |
|
|
|
<!-- Included JS Files --> |
|
<script src="javascripts/jquery.min.js"></script> |
|
<script src="javascripts/modernizr.foundation.js"></script> |
|
<!-- Combine and Compress These JS Files --> |
|
<script src="javascripts/jquery.reveal.js"></script> |
|
<script src="javascripts/jquery.orbit-1.3.0.js"></script> |
|
<script src="javascripts/forms.jquery.js"></script> |
|
<script src="javascripts/jquery.customforms.js"></script> |
|
<script src="javascripts/jquery.placeholder.min.js"></script> |
|
<!-- End Combine and Compress These JS Files --> |
|
<script src="javascripts/app.js"></script> |
|
<script type="text/javascript"> |
|
$(document).ready(function() { |
|
$('#launch-modal').click(function() { |
|
$('#modaltest').reveal(); |
|
}); |
|
}); |
|
</script> |
|
|
|
</body> |
|
</html> |
