Materialize modal not working

问题:

I wrote a simple code for materialize 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/
Why isn't it working?

回答1:

Initialize all modals first. $('.modal').modal();

Complete code will look like this

(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

回答2:

Not 100% sure what you are asking for here, but if what you are asking is how to trigger modal on button click you can simply do it by setting an onclick like this:

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

But before you can do $('#modal1').modal('open'); you need to initiate the modal in your js, like this:

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

You can check out my solution in this fiddle: https://jsfiddle.net/AndreasMolle/7f6hmgcf/13/

Another solution might be to do it this way:

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

回答3:

Materializecss documentation aint too clear i also struggled a bit, here's how i solved my problem.

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

回答4:

I recently updated my project to materializecss 0.98.0 and with this version I need to initialize modals before open it.

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

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

I don't find any configuration like "autoOpen" on the modal initial options :(.

回答5:

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

https://jsfiddle.net/juands/z512cb7f/3/ check this link

回答6:

Try Materialize.Modal class

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