Materialise modal funktioniert nicht

Question

Ich schrieb einen einfachen Code für materialisieren modal.
HTML-Code:

<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-Code:

$(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 Link: https://jsfiddle.net/7f6hmgcf/
Warum es nicht funktioniert?

Answer 1

alle Modalverben zuerst initialisieren. $('.modal').modal();

komplette Code wird wie folgt aussehen

(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

Materialisecss Dokumentation nicht zu klar Ich habe auch ein bisschen gekämpft, hier ist, wie ich mein Problem gelöst habe.

<!-- 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

Ich habe vor kurzem mein Projekt auf materialisecss 0.98.0 aktualisiert und mit dieser Version muss ich Modalitäten vor dem Öffnen initialisieren.

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

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

Ich finde keine Konfiguration wie „Auto-Open“ auf den modalen anfänglichen Optionen :(.

Answer 4

nicht 100% sicher, was Sie hier fragen, aber wenn das, was Sie fragen, ist, wie man auslösen modal auf die Schaltfläche klicken Sie es einfach tun können, indem sie ein Onclick wie diese Einstellung:

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

Aber bevor Sie können d o $ ('# modal1') modal ('offen'); Sie müssen die modale in Ihrem js, wie diese initiieren:

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

Sie können meine Lösung in dieser Geige check out: https://jsfiddle.net/AndreasMolle/7f6hmgcf/13/

Eine andere Lösung es auf diese Weise zu tun, könnte sein:

<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/ Check diesen Link

Answer 6

Materialize.Modal Klasse Versuchen

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