Материализовать модальный не работает

Question

Я написал простой код для материализации.
HTML код:

<a class="waves-effect waves-light btn view" data-target="modal1">View Scores</a> 
<!-- Modal Structure --> 
<div id="modal1" class="modal"> 
    <div class="modal-content"> 
    <h4>Modal Header</h4> 
    <p>A bunch of text</p> 
    </div> 
    <div class="modal-footer"> 
    <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a> 
    </div> 
</div> 

JS код:

$(document).ready(function() { 
    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered 
    /*$('.view').click(function(){ 
    $('#modal1').modal('open'); 
    alert('edskjcxnm'); 
    });*/ 
    /*$('.view').leanModal();*/ 
    $('#modal1').modal('open'); 
}); 

JSFiddle ссылка: https://jsfiddle.net/7f6hmgcf/
Почему не работает?

Answer 1

Инициализировать все модальности первым. $('.modal').modal();

Полный код будет выглядеть следующим образом

(function ($) { 
    $(function() { 

     //initialize all modals   
     $('.modal').modal(); 

     //now you can open modal from code 
     $('#modal1').modal('open'); 

     //or by click on trigger 
     $('.trigger-modal').modal(); 

    }); // end of document ready 
})(jQuery); // end of jQuery name space 

Answer 2

Документация Materializecss не слишком понятна, я также немного потрудился, вот как я решил свою проблему.

<!-- Modal Trigger --> 
    <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a> 

    <!-- Modal Structure --> 
    <div id="modal1" class="modal"> 
    <div class="modal-content"> 
    <h4>Modal Header</h4> 
    <p>A bunch of text</p> 
    </div> 
    <div class="modal-footer"> 
    <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</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> 

Answer 3

Я недавно обновил свой проект до materializecss 0.98.0, и с этой версией мне нужно инициализировать модалы, прежде чем открывать его.

//Old 
$('#modal1').openModal(); 

//New 
$('#modal1').modal().modal('open'); 

Я не нахожу никакой конфигурации, как «AutoOpen» на модальных начальных вариантов :(.

Answer 4

Не 100% уверен, что вы просите, но если то, что вы спрашиваете, как вызвать модальный на кнопку мыши, вы можете просто сделать это, установив OnClick, как это:

<a class="waves-effect waves-light btn view" onclick="$('#modal1').modal('open');">View Scores</a>

Но прежде, чем вы можете d o $ ('# modal1'). modal ('open'); вам нужно начать модальность в ваших JS, как это:

$(document).ready(function() { 
    $('#modal1').modal(); 
}); 

Вы можете проверить мое решение в этой скрипкой: https://jsfiddle.net/AndreasMolle/7f6hmgcf/13/

Другим решением может быть сделать это следующим образом:

<a class="waves-effect waves-light btn view" href="#modal1">View Scores</a>

Answer 5

$(document).ready(function() { 
    $('.modal').modal(); 
    $('#modal1').on('click', function() { 
    }); 
}); 

https://jsfiddle.net/juands/z512cb7f/3/ проверки этой ссылке

Answer 6

Попробуйте Materialize.Modal класс

let modal=new Materialize.Modal($("#yourModal")); 

modal.open(); //Open it on some event 

modal.close(); //This is not needed as you can close it with the modal buttons. It's tricky