Question

我正在使用Foundation 5作为我的Web应用程序。现在，当我尝试调用模态时，我得到JS错误：

未捕获的TypeError：无法读取未定义的“**
的属性'css'

在控制台中。即使在基金会博客/支持中，我也无法找到任何可能的解决办法。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, height=device-height"> 
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <link rel="stylesheet" href="css/foundation.min.css" />
    <link rel="stylesheet" href="css/swiper.css">
    <script src="js/modernizr.js"></script>
    <title>Test code</title>
</head>
<body> 
      <a href="#" data-reveal-id="myModal" data-reveal>Click Me For A Modal</a>

        <div id="firstModal" 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>

    <script type="text/javascript" src="js/index.js"></script>
    <script src="js/jquery.js"></script>  
    <script src="js/foundation.min.js"></script> 

     <script>
      $(document).foundation();
      /*Fix for Sticky footer and List to Be displayed properly in Sidebar*/          
      $(function() {
        var timer;
        $(window).resize(function() {
            clearTimeout(timer);
            timer = setTimeout(function() {
                $('.inner-wrap').css("min-height", $(window).height() + "px" );
            }, 40);
        }).resize();
      });
    </script>
    <!-- Modal -->

</body>
</html>

Answer 1

此示例的问题在于您的data-reveal-id =＆＃34; myModal＆＃34;属性不与揭示模式的id =＆＃34; firstModal＆＃34;匹配。属性。一旦匹配，您就不应再看到此错误。

另外，你的锚标签不需要数据显示属性，只有模态本身需要它。

@BobbySales：其他因素也可能导致这种情况......例如，如果您错误输入数据显示属性。如果data-reveal属性丢失或者data-reveal-id与模态的id不匹配，那么这将会中断。如果您使用javascript打开模态并且出现此错误，请确保您的数据显示属性中没有拼写错误。另一件可能导致此问题的是，如果 $（document）.foundation（）调用在页面上显示模式之前发生。

希望这有帮助。

Answer 2

如果目标div缺少data-reveal属性，也会出现此错误。

基础5 /显示模态错误/未捕获TypeError：无法读取未定义的属性'css'

2 个答案: