Question

我正在尝试使用zurb奠定5揭示模态。但是当我点击按钮时，它不起作用而且没有打开。我正在使用这个HTML代码。

<!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>

Answer 1

将最后一个脚本标记更改为：

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

Answer 2

您也忘了添加模态触发器：

<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>

请参阅此处的文档：http://foundation.zurb.com/docs/components/reveal.html

Answer 3

如果您在同一页面上两次调用 $(document).foundation();，您可能会遇到此问题。

Answer 4

它适用于我

＆＃13;

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

＆＃13;

在页脚中我使用了这个片段

＆＃13;

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

＆＃13;

Zurb Foundation 5揭示模态不起作用

4 个答案: