'Materialize Modal is not opening up

This is one of the materialize-modals Im using in my file:

<li class="logged-in">
   <a href="#" class="grey-text modal-trigger" data-target="modal-signup">SignUp</a>
</li>


 <div id="modal-signup" class="modal">
        <div class="modal-content col s4 m6 l12">
            <h4>SignUp</h4><br>
            <form id="signup-form">
                <div class="input-field">
                    <input type="email" id="signup-email" required>
                    <label for="signup-email">Email Address</label>
                </div>
                <div class="input-field">
                    <input type="password" id="signup-password" required>
                    <label for="signup-password">Choose Password</label>
                </div>
                <button class="btn yellow darken-2 z-depth-0">SignUp</button>
            </form>
        </div>
    </div>

The JS code for initilizing the modals:

document.addEventListener('DOMContentLoaded',function(){
    var modals=document.querySelectorAll('.modal');
    console.log(modals)
    M.Modal.init(modals);         
})

But on clicking ,it doesnt open up...

htmlcssmodal-dialogmaterializesimplemodal


Solution 1:[1]

I have tried it and it's work (The modal is open up). I think that happen because you sir not include the Materialize CDN, more info in https://materializecss.com/getting-started.html.

You can try this sir, maybe it can help

document.addEventListener("DOMContentLoaded", function () {
  var modals = document.querySelectorAll(".modal");
  console.log(modals);
  M.Modal.init(modals);
});
<head>
  <!-- Materialize Version 1.0.0 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
</head>

<body>
    <li class="logged-in">
      <a href="#" class="grey-text modal-trigger" data-target="modal-signup">SignUp</a>
    </li>

    <div id="modal-signup" class="modal">
      <!-- Your Modal HTML code -->
    </div>

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    
    <!-- Compiled and minified JavaScript -->
    <script src="/main.js"></script>
  </body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Zefa Shofihatul

Related Questions