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

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

What is the method for retrieving a specific value following the submission of an AngularJS form?

Here is how my form begins: <!-- form --> <form ng-submit="form.submit()" class="form-horizontal" role="form" style="margin-top: 15px;"> <div class="form-group"> <label for="inputUrl" class="col-sm- ...

javascriptangularjs

For an unknown reason, I am facing difficulties in using the Storage feature from @angular/fire in ANGULAR 16

Recently I started exploring Angular/Fire and decided to test out some of its features by creating a basic app. Firestore and authentication were working smoothly, but when I attempted to include Storage, an error message popped up: ERROR FirebaseError: ...

javascriptangularfirebaseangularfire

What alternative can be used for jquery isotope when JavaScript is not enabled?

Is there a backup plan for jQuery isotope if JavaScript isn't working? For instance, if I'm using the fitColumns feature, is there an alternative layout style available in case JavaScript is disabled, similar to what is seen on the new Myspace? ...

javascriptjqueryhtmlcssjquery-isotope

unable to assign values to this.props (appears as undefined or an empty array)

Upon setting up react/redux, I encountered a peculiar issue. When my component mounts, it should render the information stored in this.props.heroes.data. However, upon logging this data, I receive an unexpected value of [{id:1,heroname:'Batman',r ...

javascriptreactjspostgresqlexpressreact-redux

Executing a JavaScript function when an element is clicked using inline

Is it possible to write the code below in a single line? <a href="#" onClick="function(){ //do something; return false;};return false;"></a> As an alternative to: <a href="#" onClick="doSomething(); return false;"></a> functio ...

javascriptonclick

react component not displaying image

I must admit, this might be a silly question but I'm just starting out in web development. My goal is to create a clickable image component that redirects to another page on the website. However, despite not encountering any errors, the image is not ...

javascriptreactjsimage

Avoid transitioning to a different page using Vue-router

I have recently ventured into the world of Vue.js and my current project involves fetching data from an API, implementing pagination, and creating a detailed view for each post upon clicking. I have successfully implemented the pagination feature, however, ...

javascriptvue.jsvue-router

Modify the form's action attribute when submitted

I am trying to create a form with multiple buttons that will change the action and target properties when a specific button is clicked. Below is my code snippet: <div id="root"> <form :action="form.action" ref="form" :target="form.target"&g ...

javascriptvue.js

Tips on how to render a component only after receiving an AJAX response

I'm encountering an issue with one of my React components. It seems like AJAX is not fetching all the content from the external server before React renders the ChildComp component. https://i.stack.imgur.com/o0ZtH.png Above, you can view the tree of ...

javascriptajaxreactjs

What is the best way to retrieve a specific number of documents from MongoDB?

I am currently facing an issue with my code that is returning all news related to a company. However, I only want the first 15 elements. Is there a way to achieve this? The following code snippet retrieves all news for a company using the google-news-jso ...

javascriptjsonapinpmnext.js

The function `collect` cannot be found for the object #<Page:0x007f4f200a9350

Seeking assistance with an error I've encountered. As a novice, I'm still navigating my way through this, so any guidance on how to resolve it would be greatly appreciated. Attached is the portion of code that is triggering the error: 3: <%= ...

javascriptruby-on-railsrubyactioncontroller

Customizing React component properties within a Styled Component

I have been experimenting with styled components to customize the appearance of basic material-ui React components. My goal is to pass props into the MUI component and then use styled components to apply CSS styling. One interesting aspect is being able t ...

javascriptreactjsmaterial-uistyled-components

Utilizing JavaScript to retrieve data using AJAX

Having trouble sending emails through ajax on my website. The form is in a modal (using custombox), but all values being sent are null. How can I utilize getElementById in modal content? Link to custombox git's hub: https://github.com/dixso/custombox ...

javascriptajaxmodal-dialog

Is there a method in TypeScript to make an enum more dynamic by parameterizing it?

I've defined this enum in our codebase. enum EventDesc { EVENT1 = 'event 1', EVENT2 = 'event 2', EVENT3 = 'event 3' } The backend has EVENT1, EVENT2, EVENT3 as event types. On the UI, we display event 1, event 2, a ...

javascriptreactjstypescriptreact-i18next

Material-UI: Eliminate the missingOppositeContent:before element from TimelineItem

I'm currently using Material-UI to construct a timeline. Here is the code snippet I am working with: <Timeline align="right" className={classes.monthlyContainer}> <TimelineItem > <TimelineSeparator className={class ...

cssreactjsmaterial-ui

What is the best approach to dynamically implement useReducer in code?

Take a look at the repository here: https://github.com/charles7771/ugly-code In the 'Options' component, I am facing an issue where I am hardcoding different names for each reducer case instead of dynamically generating them for a form. This app ...

javascriptreactjs

Tips for showcasing checkbox options on an HTML page (utilizing ejs) following the retrieval of information from MongoDB and making it editable for the User

Currently, I store data in mongo for a multiple-choice question and indicate the correct answers. In mongo, I save them like this: question.options.option1.check = "on" for the correct answers. When I navigate to the "edit" page, I retrieve the specific ...

javascriptmongodbexpresscheckboxejs

Guide to direct express.js requests straight to 404 page

I need guidance on how to direct a request to a specific route in express.js directly to a 404 error page if the user is not authenticated. Currently, my middleware includes the following code: exports.isAuthenticated = function (req, res, next) { if ( ...

javascriptnode.jsexpress

Ways to position a div at the center of a page

I've encountered a challenge while creating a mobile website. Within the main div, there are three nested divs. Initially, I aimed for left alignment but now desire to center-align these three divs on the page. Essentially, if the device screen is wid ...

csshtmlcenteralignment

Whenever a user tries to retrieve a page using ajax and then proceeds to submit the form associated with that page, they encounter

In my addQuestions.php file, I have four options available - single, multiple, matrix, and true false type questions with values 1-4 assigned to each respectively. To dynamically load the appropriate question type based on user selection, I am using AJAX w ...

phpjavascriptajax