CODEWITHSUNDEEP
javascriptjquerymaterialize
Ajay Kulkarni
Ajay Kulkarni

Reputation: 3039

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?

Upvotes: 18

Views: 40548

Answers (6)

Alfred Alfizo Mosima
Alfred Alfizo Mosima

Reputation: 721

MaterializeCCS documents aren't too clear, here's how I solved my problem.

HTML

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

JavaScript

$(document).ready(function(){
    // the "href" attribute of .modal-trigger must specify the modal ID that   wants to be triggered
    $('.modal-trigger').leanModal();
});

Upvotes: 5

MrViK
MrViK

Reputation: 124

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

Upvotes: 1

Juan Diego Silva
Juan Diego Silva

Reputation: 41

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

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

Upvotes: 2

Alexey
Alexey

Reputation: 528

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

Upvotes: 36

Andreas Moldskred
Andreas Moldskred

Reputation: 315

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>

Upvotes: 7

Barceyken
Barceyken

Reputation: 105

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 :(.

Upvotes: 3

Related Questions