Materialize Cssmodal 显示 $(..)leanmodal 不是函数错误答案

【问题标题】：Materialize Cssmodal showing $(..)leanmodal is not a function ErrorMaterialize Cssmodal 显示 $(..)leanmodal 不是函数错误
【发布时间】：2015-11-10 17:12:20
【问题描述】：

当我尝试使用下面的代码创建一个物化 css moal 时，我收到了错误。

<script src="~/Scripts/jquery-1.10.2.js"></script>


<link href="~/css/materialize.css" rel="stylesheet" />
<script src="~/js/materialize.js"></script>

<a id="btnReset" class="waves-effect waves-light btn modal-trigger" data-target="modal1">Reset</a>

    <!-- Modal Structure -->
    <div id="modal1" class="modal">


        <div class="modal-content">
            <h4>Warning !</h4>
            <p>Do you really want to reset ?</p>
        </div>
        <div class="modal-footer">
            <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Yes</a>
            <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">No</a>
        </div>
    </div>

<script>

    $(document).ready(function () {
        // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
        $('.modal-trigger').leanModal();

    });
</script>

Error Image

我也试过this question。

【问题讨论】：

标签： javascript css materialize

【解决方案1】：

也许您正在使用 Materialize 0.97.8，它不再支持leaModal（它只是更改为模态 - 查看Materialize Documentation。

我也遇到了这个问题，并通过使用 Materialize 0.97.7 解决了它。

【讨论】：

【解决方案2】：

检查你的文件的这个好路径，因为代码是好的。我给你举个例子让你有实力。 Modal Materialize

<!--SCRIPT-->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js"></script>

<div class="container">
<a id="btnReset" class="waves-effect waves-light btn modal-trigger" data-target="modal1">Reset</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
    <div class="modal-content">
        <h4>Warning !</h4>
        <p>Do you really want to reset ?</p>
    </div>
    <div class="modal-footer">
        <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Yes</a>
        <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">No</a>
    </div>
</div>
</div>  
<script>

$(document).ready(function () {
    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
    $('.modal-trigger').leanModal();

});
</script>

【讨论】：

【解决方案3】：

Materialize 从leanModal 切换到0.97.8 版本的modal

对于任何想要使用最新版本的 Materialize 但不想重构代码的人，只需将其应用于任何加载模式的页面即可。

(function($){
  $.fn.leanModal = function(options) {
    if( $('.modal').length > 0 ){
        $('.modal').modal(options);
    }
  };

  $.fn.openModal = function(options) {
    $(this).modal(options);
    $(this).modal('open');
  };

  $.fn.closeModal = function() {
    $(this).modal('close');
  };
})(jQuery);

这将允许您通过新的模态 API 使用 leanModal()、openModal() 和 closeModal() 函数。

【讨论】：

$.fn.leanModal 搜索所有模态并将它们设置为用于模态触发器的 href 等于模态 ID 的模态触发器。

【解决方案4】：

如果没有示例或链接，很难知道，但很可能没有加载以下 js 文件。您的网站上真的有一个以“~”为名称的文件夹吗？发布链接或 jsfiddle。

 <script src="~/Scripts/jquery-1.10.2.js"></script>
 <link href="~/css/materialize.css" rel="stylesheet" />
 <script src="~/js/materialize.js"></script>

【讨论】：

他可能会隐藏该文件夹的整个路径