javascript 实现 Cssmodal 显示 $(..)leanmodal 不是函数错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33635704/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Materialize Cssmodal showing $(..)leanmodal is not a function Error
提问by Aneez
When I try to create a a materialize css moal using the below code , I am getting Error.
当我尝试使用以下代码创建 aa materialize 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>I tried this questionalso.
我也试过这个问题。
回答by Bruno Silvano
Maybe you're using Materialize 0.97.8, which doesn't support leanModal anymore (it change simply to modal - check out Materialize Documentation.
也许您正在使用 Materialize 0.97.8，它不再支持 LeanModal（它只是更改为 modal - 查看Materialize Documentation。
I had this issue also and solved it by using Materialize 0.97.7.
我也有这个问题并通过使用 Materialize 0.97.7 解决了它。
回答by MBahamondes
check this good path of your files , as the code is well . I leave an example for you to have strength . 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>
回答by Ron Ross
Materialize switched from leanModal to modal with version 0.97.8
Materialise 从 LeanModal 切换到 0.97.8 版本的模态
For anyone that wants to use the latest version of Materialize, but doesn't want to refactor code, simply apply this to any page that loads a 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);
This will allow you to use leanModal(), openModal(), and closeModal() functions with the new modal API.
这将允许您在新的模态 API 中使用 LeanModal()、openModal() 和 closeModal() 函数。
回答by Macsupport
Without an example or link it is hard to know but most likely, the following js files are not being loaded. Do you really have a folder on your site with "~" as the name? Post a link or jsfiddle.
没有示例或链接很难知道，但最有可能的是，以下 js 文件没有被加载。您的网站上真的有一个以“~”为名称的文件夹吗？发布链接或jsfiddle。
<script src="~/Scripts/jquery-1.10.2.js"></script>
<link href="~/css/materialize.css" rel="stylesheet" />
<script src="~/js/materialize.js"></script>
