Struggling with implementing a materialize modal?

I am encountering a problem with Materialize. This time, I am trying to create a modal div, but it doesn't seem to be working. The button is created, but when I click on it, nothing happens. I have made sure to link all the necessary Materialize files, but it still isn't functioning correctly. Below is my HTML code:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <!--Import materialize.css-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="../css/materialize.min.css" media="screen,projection" />

  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"
    integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700,800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="../css/home.css">



  <title>Document</title>
</head>

<body>


  <!-- 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-close waves-effect waves-green btn-flat">Agree</a>
    </div>
  </div>


</body>
<!-- FIREBASE -->
<script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.13.2/firebase-auth.js"></script>

<!-- JAVASCRIPT -->
<script src="../scripts/app.js"></script>
<script src="../scripts/account.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>

<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="../scripts/materialize.min.js"></script>


</html> -->

Answer №1

Make sure to properly initialize the modal:

document.addEventListener('DOMContentLoaded', function() {
    var elements = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elements);
  });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to connect either of two distinct values in Angular?

Looking to assign the data with two possible values, depending on its existence. For instance, if I have a collection of TVs and I want to save the "name" value of myTVs[0] and myTVs[1]. For example: var myTVs = [ { "JapaneseTV": { ...

Tips for accurately relocating elements within a tooltip

Currently, I am working on implementing a like model within a Rails application. In order to display which user liked the bonus, I have incorporated foundation tooltip. Below is the code snippet: - avatars = bonus.like_user_avatars.map { |avatar| image_t ...

Best method for extracting object values from an array in Javascript using loops?

Recently Updated: Complete values of respons: "{"versions":[ { "name":"Windows 8.1 with Update 3 (build 9600)", "version_id":"11" }, { "name":"Windows 7 SP1 (build 7601)", "version_id":"9" }, { "name": ...

employing JavaScript to present an image

Here is the image code I have: <img id="imgId" src="img/cart.png" style="display: none"/> After clicking a button, it triggers a JavaScript function to show the image document.getElementById("imgId").style.display = "inline" The image display ...

The input text in the Typeahead field does not reset even after calling this.setState

As I work on creating a watchlist with typeahead functionality to suggest options as the user types, I encountered an issue where the text box is not resetting after submission. I attempted the solution mentioned in this resource by calling this.setState( ...

What is the best way to send FormData from a React JS axios post request to a Node server?

I am facing an issue where the form data is not reaching the node server even though it shows in the network payload at the time of request. Below are the snippets from different files involved in the process. let formData = new FormData(); // fo ...

Guarantee the successful execution of a server-side function using my client-side function

I am currently in the process of creating a website that utilizes Javascript and Asp.net. My code contains numerous functions on the client side, within my html code, while my server side functions are called using a webservice. How can I ensure that my c ...

Could you please explain the mysterious space that appeared between padding-bottom and border-bottom?

I noticed a very subtle orange gap between the padding-bottom and border-bottom. What could be causing it? https://i.sstatic.net/7eFXw.png Below is the code snippet in question: p { border-bottom: 1px solid #E8E8E8; margin: 0 auto; padding-botto ...

Fixing the hydration error in Next 13 can be challenging, especially when it occurs outside of a Suspense boundary

Encountering an issue while working with Next.js 13: Error: Hydration failed because the initial UI does not match what was rendered on the server. Warning: Expected server HTML to contain a matching <div> in <html>. Every time I attempt to r ...

Different approach to handling overflow without using the hidden property in CSS

Having trouble with my CSS layout I've created a form within a fixed 500 pixel width div that is centered on the page using margin auto; To create a table-like structure within the div, I used div elements as rows. Due to varying heights of these ro ...

Constance in JavaScript

Looking to create constants in Javascript and seeking advice on the best way to do so. While I am aware that true constants don't technically exist, I'm finding it difficult to change values after exporting them. Are constants necessary? Is the ...

Applying a translucent layer of color to a jpeg image to create a subtle background effect

I am attempting to create a semi-transparent, solid background color on top of an <img> tag, while still showing the original image underneath at the same ratio and size. Below is a snippet of the code I am working with (let me know if you need more ...

Creating a circular text element with text both in the center and around the edges using CSS

I am attempting to recreate this image using CSS. Unfortunately, I haven't had success achieving those detailed edges with text. Is it feasible to accomplish this effect in CSS, and if so, what approach would be best? ...

Nextjs exposes a bug in react-bootstrap's navbar component

After integrating react-bootstrap with nextjs, I encountered a strange issue with the NavBar component. The problem arises when I first load the navbar - everything appears as expected, https://i.stack.imgur.com/R9guE.png but upon refreshing the page, CS ...

What is the best way to determine whether a YouTube video permits embedded playback?

When working with user-generated content, it's important to note that YouTube channels may restrict their videos from being played in an embedded player. In order to provide a better user experience, I need to detect the specific reason why a video ca ...

Ways to create auto-suggest recommendations that exceed the boundaries of the dialogue container

Is there a way to position autosuggest suggestions above the dialog instead of within it, in order to prevent scrolling of dialog content? Check out this sandbox example for reference: https://codesandbox.io/embed/adoring-bogdan-pkou8 ...

Tips for creating mocks/stubs for vue-i18n?

I have recently made the switch from Jest to Vitest as my unit testing library for my Vue 3 application. Currently, I am facing an issue while trying to write a unit test for a component that utilizes the vue-i18n library for text translation. When attemp ...

Unable to show an image within the <div> element when hovering the mouse

Is it necessary to use the background style image in order to display an image on mouseover of a name? I have implemented a controller and would like the image to be replaced by text within a div tag. Below is my HTML code: <!DOCTYPE html> <html& ...

Conflict between Angular's ng-repeat directive and Sass styling

Currently, I am working on a project and encountering an issue that is causing some difficulty: In order to create a navigation bar with equally distributed list elements based on the number of items, I am utilizing ng-repeat for data binding and Sass for ...

How to extract a value from a BehaviorSubject within an Angular 6 guard

I have chosen this approach because I have another guard responsible for validating the user based on a token that was previously stored. This is how it was handled in previous versions of rxjs, but now with the latest version you can no longer use map on ...