Materialize Cssmodal showing $(..)leanmodal is not a function Error

Question

When I try to create a a materialize css moal using the below code , I am getting Error.

<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

I tried this question also.

Answer 1

Maybe you're using Materialize 0.97.8, which doesn't support leanModal anymore (it change simply to modal - check out Materialize Documentation.

I had this issue also and solved it by using Materialize 0.97.7.

Answer 2

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>

Answer 3

Materialize switched from leanModal to modal with version 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.

(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.

Answer 4

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.

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