Modal not opening on click (materialize, jquery)

react-materialize modal
materialize modal codepen
modal materialize
materialize modal close event
materialize modal overlay
materialize modal is not a function
materialize login modal
materialize modal onopenstart

I am playing around with a sample note manager app built using meteor/materialize/jquery.

I am having problems with my modal not popping up like it should when a button is clicked.

Here is the code for my modal:

<template name="add">
 <div id="addNote" class="modal">
  <div class="modal-content">
   <h3>Add Note</h3>
   <form class="add-form">
    <input type="text" name="text" placeholder="Add note...">
   </form>
  </div>
 </div>
</template>

This is the button that then when pressed should open the modal.

<li class="nav-item">
 <button id="addNote" class="waves-effect waves-light btn" href="#addNote">Add Note</button>
</li>

I also have this jquery code which is apparently to initialize the modal.

<script>
 $(document).ready(function(){
 $('.modal').modal();
});
</script>

When I click on the button, the modal does not pop up like I believe it should.

When I add this one line of code, the modal is open by default upon reloading the page.

<script>
 $(document).ready(function(){
  $('.modal').modal();
  $('#addNote').modal('open');
});
</script>

Therefore I would think that by doing something such as

<script>
  $('#addNote').click(function() {
   $('#addNote').modal('open');
});
</script>

or by doing

<button onclick="myFunction()"></button>

However, neither one of them are working as expected and the modal will not open. Does anyone know what I am doing wrong here?

This is probably happening because the button and the div have the same id of "addNote". Try changing the id of the button and then the jQuery script.

<button id="addNoteButton" class="waves-effect waves-light btn" 
href="#addNote">Add Note</button>

<script>
 $('#addNoteButton').click(function() {
   $('#addNote').modal('open');
  });
</script>

Modals, To add a close button, just add the class .modal-close to your button. to open a modal specify the Modal ID in data-target rather than the href attribute. <! dismissible, Boolean, true, Allow modal to be dismissed by keyboard or overlay click. Because jQuery is no longer a dependency, all the methods are called on the  Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

Was able to fix by using the following code

<li class="nav-item">
 <button name="addNoteButton" class="waves-effect waves-light btn" href="#addNote" onclick="$('#addNote').modal('open');">Add Note</button>
</li>

Modal not open · Issue #4681 · Dogfalo/materialize · GitHub, I've tested to rollback in 0.97.7 with jQuery 3.2.1 and it's working. New version : (​only add #xx on url) $('.modal-trigger')  Description I've recently updated my website with the last Materialize release and now, modal on my page doesn't seem to work anymore. I've updated Materialize version from 0.97.7 to 0.98.2 and jQuery from 3.0.0 to 3.2.1.

$(document).ready(function(){
    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
    $('.modal-trigger').leanModal();
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css"> 
<div class="row section">
  <div class="col">
    <!-- Modal Trigger -->
    <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
    <p>You have to include jQuery and Materialize JS + CSS for the modal to work. You can include it from <a href="http://materializecss.com/getting-started.html">CDN (getting started)</a>.
  </div>
</div>
<!-- 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>

$("modal").openModal is not a function · Issue #3845 · Dogfalo , openModal, open and modal properties are undefined. opening but doesn't apply opacity and doesn't catch closing the modal when clicking outside of it. Import jQuery before materialize.js--> <script type="text/javascript"  How I can open a materialize modal when a window is ready? It works if I click on the trigger button, but I don't want a click. I had to nest the jQuery('#

opening model using materialize css

I think you must have to specify a modal-trigger on your trigger button as bellow. just try it.

HTML

<li class="nav-item">
 <button type="button" id="addNote" class="waves-effect waves-light btn modal-trigger" href="#addNote">Add Note</button>
</li>

JS

<script type="text/javascript">
    $(function(){
      //the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
      $(".modal").modal();
    });
</script>

Materialized modal not displaying, Modal on button link clicked When hover, highlight on screen was also not visible <div id="modal1" class="modal open" style="z-index: 1003; display: block; opacity: <script type="text/javascript" src="javascript_path/jquery-3.1.1.js"></​script>  Click the above example to open Bootstrap modal on button click. jQuery is not required here to add and open the modal. Just use the attributes in the button tag with explained values as above. Just use the attributes in the button tag with explained values as above.

It's already an old question and with found solution (despite no accepted answer?), but been playing with this right now. I think some clarifications will help.

Was that your whole code? If not, check the line if having .modal initiated first.

$('.modal').modal();

You have omitted that part when describing details in your further steps.

<script>
  $(document).ready(function(){
    $('.modal').modal();
    $('#addNote').click(function() {
      $('.modal').modal('open');
    });
  });
</script> 

6 Examples of Materialize Modals with live Demos and , The Materialize CSS has built-in modal component that you may use easily for Have a look at the markup, jQuery code and working modal by clicking the link or dismissible: false, // Modal cannot be closed by clicking anywhere outside. The modal can be closed by clicking anywhere outside the modal window or using the close button within the modal. So, you may also use modal for the confirmation messages. Creating materialize modal is easy and require a few line of codes of HTML and jQuery.

Materialize Modal example, <p>You have to include jQuery and Materialize JS + CSS for the modal to work. You can include it from <a href="http://materializecss.com/getting-started.html">  I get $("modal").openModal is not a function after your release 0.97.8 openModal, open and modal properties are undefined. It works OK in 0.97.7

Materialize Tutorial #15 - Modals, Materialize is a modern responsive CSS framework based on Material Design To add a close button, just add the class .modal-close to your button. You can also open modals programatically, the below code will make your modal open on leanModal({ dismissible: true, // Modal can be dismissed by clicking outside of​  Modals with Fixed Footer Modal With Fixed Footer. If you have content that is very long and you want the action buttons to be visible all the time, you can add the modal-fixed-footer class to the modal.

Materialize, I try use this code, but not work: $('#modal1').modal('modal').options.dismissible = false;. Select all. Open in new window. The reference page o  We open the same modal 4 times : data-overlay-counter="4" We close the modal : data-overlay-counter="3" There is no modal left but the overlay is still there. We need a way to distinguish opening the modal when it is already opened and opening it when its closed IMO.

Comments
  • I am going to implement your suggestions because I think it is just good practice to rename them something separate, although even after implementing these changes, the problems still persists.