Материализовать Cssmodal, показывающий, что $(..)leanmodal не является ошибкой функции

Когда я пытаюсь создать материализацию 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>

Изображение ошибки

Я также пробовал этот вопрос.


person Aneez    schedule 10.11.2015    source источник


Ответы (4)


Возможно, вы используете Materialize 0.97.8, который больше не поддерживает модальный режим (он просто меняется на модальный — проверьте Materialize Документация.

У меня тоже была эта проблема, и я решил ее с помощью Materialize 0.97.7.

person Bruno Silvano    schedule 16.01.2017

проверьте этот хороший путь к вашим файлам, так как код в порядке. Я оставляю пример для вас, чтобы иметь силу. Модальная материализация

<!--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>
person MBahamondes    schedule 11.11.2015

Materialise переключился с LeanModal на модальный в версии 0.97.8.

Для тех, кто хочет использовать последнюю версию 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);

Это позволит вам использовать функции leanModal(), openModal() и closeModal() с новым модальным API.

person Ron Ross    schedule 10.12.2017
comment
$.fn.leanModal ищет все модальные окна и устанавливает их для использования в качестве модальных триггеров, где href модальных триггеров равен модальному идентификатору. - person Ron Ross; 23.01.2018

Без примера или ссылки трудно понять, но, скорее всего, следующие файлы js не загружаются. У вас действительно есть папка на вашем сайте с "~" в качестве имени? Разместите ссылку или jsfiddle.

 <script src="~/Scripts/jquery-1.10.2.js"></script>
 <link href="~/css/materialize.css" rel="stylesheet" />
 <script src="~/js/materialize.js"></script>
person Macsupport    schedule 11.11.2015
comment
он может скрыть весь путь к этой папке - person Janatbek Orozaly; 24.02.2017