Question

当我尝试使用以下代码创建一个实现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。

Answer 1

也许您正在使用Materialise 0.97.8，它不再支持leanModal（它只是简单地改为模态 - 请查看Materialize Documentation。

我也遇到了这个问题，并使用Materialise 0.97.7解决了这个问题。

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

Answer 3

Materialise从leanModal切换到modal，版本为0.97.8

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

(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);

这将允许您将leanModal（），openModal（）和closeModal（）函数与新的模态API一起使用。

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

Materialise Cssmodal显示$（..）leanmodal不是函数错误

4 个答案: