Question

任何人都可以解决这个问题，我无法让模态发挥作用。浏览器控制台显示此错误：Uncaught TypeError: $(...).modal is not a function

我尝试取消注释Query.noConflict();和jQuery(function($){}，但这没有任何区别。

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" class="ui" href="http://oss.maxcdn.com/semantic-ui/2.0.4/components/modal.min.css">
        <link rel="stylesheet" type="text/css" class="ui" href="http://oss.maxcdn.com/semantic-ui/2.0.4/components/button.min.css">

        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    </head> 

    <body>
        <button class="ui button">Test</button>

        <div class="ui modal my-dialog">
          <i class="close icon"></i>
          <div class="content">
            <div class="description">
              <div class="ui header">Text stuff here.</div>
            </div>
          </div>
          <div class="actions">
            <div class="ui black deny button">
              Nope
            </div>
            <div class="ui positive right labeled icon button">
              Yep, that's me
            </div>
          </div>
        </div>

        <script>
            $( document ).ready(function() {
                console.log( "document loaded" );
                // jQuery.noConflict();

                // Your jQuery code here, using the $
                // jQuery(function($){                  
                    $('.ui.modal.my-dialog')
                        .modal('show');
                // });              
            });                         
        </script
    </body>
</html>

Answer 1

您已包含该插件的 CSS ，但不包含其JavaScript。您还需要包含JavaScript（在包含jQuery的脚本标记之后）。

Semantic-UI，Uncaught TypeError：$（...）。modal不是函数

1 个答案: