Cssmodal materialization showing $ (..) leanmodal is not an Error function

Question

When I try to create mizeize css using the code below, I get an 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 .

Answer 1

Perhaps you are using Materialize 0.97.8, which no longer supports leanModal (it just changes modality - check out the Materialize Documentation .

I also had this problem and it was solved using Materialize 0.97.7.

Answer 2

check this good path to your files as the code is good. I leave you an example of power. 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

Without an example or link it’s hard to understand, but most likely the following js files are not loading. Do you really have a folder on your site with the name "~" as the name? Send 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> 

Answer 4

Materialize the switch from leanModal to modal with version 0.97.8

For those who want to use the latest version of Materialize, but don’t want to reorganize the code, just apply this to any page loading the 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.