2014-01-11 44 views
3

我想使用zurb基礎5揭示模態。但是,當我點擊按鈕時它不工作並且不能打開。 我使用這個html代碼。Zurb基金會5揭示模態不工作

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
<link type="text/css" rel="stylesheet" href="css/foundation.css" /> 
<link type="text/css" rel="stylesheet" href="css/normalize.css" /> 
<title>index</title> 
</head> 
<body> 
<div id="myModal" class="reveal-modal" data-reveal> 
    <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> 
<a class="button" href="#" data-reveal-id="myModal">Click for a modal</a> 

<script src="js/vendor/jquery.js"></script> 
<script src="js/foundation/foundation.js"></script> 
<script src="js/foundation/foundation.reveal.js"></script> 
<script type="text/javascript"> 
    $('#myModal').foundation(); 
</script> 
</body> 
</html> 

回答

11

改變最後script標籤這樣的:

<script type="text/javascript"> 
    $(document).foundation(); 
</script> 
+0

這應該是公認的答案。 – skwidbreth

-1

其作品我

<a href="#" data-reveal-id="myModal" id="dd">Click Me For A Modal</a> 
 
<div id="myModal" class="reveal-modal" data-options="close_on_background_click:false" data-reveal> 
 
    <h2>Awesome. I have it.</h2> 
 
<p class="lead">Your couch. It is mine.</p> 
 
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p> 
 
<a class="close-reveal-modal">&#215;</a> 
 
</div>

在頁腳我用這個片段

<script> 
 
jQuery(document).ready(function(){ 
 
    jQuery(document).foundation(); 
 
\t jQuery('#dd').click(function(){ 
 
\t jQuery('#myModal').foundation('reveal', 'open'); 
 
\t }); 
 
\t 
 
\t 
 
\t }); 
 
\t  
 
    </script>

+1

這很奇怪,當我運行你的代碼時,它不適合我。 – mario