Materialise Cssmodal pokazujący $ (..) leanmodal nie jest funkcją Error

Question

Kiedy próbuję utworzyć materializację css moal używając poniższego kodu, pojawia się błąd.

<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

Próbowałem this question również.

Answer 1

Bez przykładu lub łącza trudno jest się domyślić, ale najprawdopodobniej następujące pliki js nie są ładowane. Czy naprawdę masz folder na swojej stronie z "~" jako nazwą? Opublikuj link lub jsfiddle.

Answer 2

sprawdź tę dobrą ścieżkę swoich plików, ponieważ kod jest dobrze. Zostawiam przykład, abyś miał siłę. 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

Może używasz zmaterializować 0.97.8, która nie obsługuje leanModal już (to zmienić po prostu modalne - sprawdź Materialize Documentation

miałem ten problem i rozwiązać go także przez. stosując zmaterializować 0.97.7.

Answer 4

Materialise przełączane z leanModal do modalne wersji 0.97.8

dla każdego, kto chce korzystać z najnowszej wersji urzeczywistnią, ale łania nie chcesz korygować kodu, po prostu zastosuj to do dowolnej strony, która ładuje 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); 

To pozwoli Ci wykorzystać leanModal(), openModal() i closeModal() funkcji z nowym modalne API.