Materialize modal idle

Question

I wrote a simple code to materialize. 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 doesn't it work?

Answer 1

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

The full 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

Answer 2

Not 100% sure what you are asking here, but if you ask how to trigger a modal click on a button, you can simply do this by setting onclick as follows:

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

Run codeHide result

$('# 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>

Hide result

Answer 3

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 4

materializecss 0.98.0, , .

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

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

​​, "autoOpen" : (.

Answer 5

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

https://jsfiddle.net/juands/z512cb7f/3/

Answer 6

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 tricky