The modal fails to display the content

The modal is not displaying the content when the button is clicked. It only shows the modal and the "x" icon, but not the modal content.

HTML CODE:

                  <!-- The Modal -->
<div class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close-btn">&times;</span>
    <p>Some text in the Modal..</p>
  </div>
</div>

CSS CODE: (To style the modal)

.modal {
  display: none;
  position: fixed; 
  padding-top: 50px;
  left: 0; 
  top: 0;
  width: 100%;
  height: 100%; 
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
  position: relative; 
  background-color: white;
  padding: 20px; 
  margin: auto; 
  width: 75%;  
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}
.close-btn {
  float: right; 
  color: lightgray; 
  font-size: 24px;  
  font-weight: bold;
}
.close-btn:hover {
  color: darkgray;
}
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}
@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

JavaScript CODE: (To show the modal and for the "x" icon)

let modalBtn = document.getElementById("modal-btn")
let modal = document.querySelector(".modal")
let closeBtn = document.querySelector(".close-btn")
modalBtn.onclick = function(){
  modal.style.display = "block"
}
closeBtn.onclick = function(){
  modal.style.display = "none"
}
window.onclick = function(e){
  if(e.target == modal){
    modal.style.display = "none"
  }
}

I am having trouble fixing this issue because everything seems to be fine. I'm not sure what could be causing it, especially since the modal-content doesn't have a display: none; property. Thank you in advance for any help.

javascripthtmlcss

Answer №1

Hey there, your code looks good overall, but there's one thing you forgot to include.

<input type="button" id="modal-btn" value="button">

Check out this image for reference:

Modal with content

Answer №2

Here is a code snippet you can use to create a modal with HTML, CSS, and JavaScript:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  function show_modal(){
    document.getElementById("modal").style.display = "block";
  }
  function close_modal(){
    document.getElementById("modal").style.display = "none";
  }
</script>
<style>
.modal {
  display: none;
  position: fixed; 
  padding-top: 50px;
  left: 0; 
  top: 0;
  width: 100%;
  height: 100%; 
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
  position: relative; 
  background-color: white;
  padding: 20px; 
  margin: auto; 
  width: 75%;  
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}
.close-btn {
  float: right; 
  color: lightgray; 
  font-size: 24px;  
  font-weight: bold;
}
.close-btn:hover {
  color: darkgray;
}
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}
@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}
</style>
</head>
<body>
<button class="modal-btn" onclick="show_modal()">Show Model</button>
<!-- The Modal -->
<div id="modal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span onclick="close_modal()" class="close-btn">&times;</span>
    <p>Some text in the Modal..</p>
  </div>
</div>

</body>
</html>

Answer №3

Your code is functioning perfectly. To implement the toggle visibility functionality in your JavaScript, simply include a button with the id modal-btn. Make sure to run the snippet below to witness a live demonstration of its operation.

let modalBtn = document.getElementById("modal-btn")
let modal = document.querySelector(".modal")
let closeBtn = document.querySelector(".close-btn")
modalBtn.onclick = function() {
  modal.style.display = "block"
}
closeBtn.onclick = function() {
  modal.style.display = "none"
}
window.onclick = function(e) {
  if (e.target == modal) {
    modal.style.display = "none"
  }
}
.modal {
  display: none;
  position: fixed;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  position: relative;
  background-color: white;
  padding: 20px;
  margin: auto;
  width: 75%;
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

.close-btn {
  float: right;
  color: lightgray;
  font-size: 24px;
  font-weight: bold;
}

.close-btn:hover {
  color: darkgray;
}

@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }
  to {
    top: 0;
    opacity: 1
  }
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0
  }
  to {
    top: 0;
    opacity: 1
  }
}
<button id="modal-btn">Open Modal</button>
<div class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close-btn">&times;</span>
    <p>Some text in the Modal..</p>
  </div>
</div>

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

How to retrieve values/keys from a JSON object dynamically in JavaScript without relying on fixed key names

shoppingCart = { "Items": 3, "Item": { "iPhone 11 Pro": { "productId": 788, "url": "http://website.com/phone_iphone11pro.html", "price": 999.99 }, "Bose Noise Cancelling Headphones": { ...

javascriptjqueryjsonobjectjsonparser

How can Spring and AngularJS (HTML) work together to retrieve the Context Path?

Currently, I am working with Spring and AngularJS. I haven't encountered any issues displaying my index.html using Spring in the following way: @RequestMapping(value="/") public String index() { return "/app/index.html"; } Is there a way for me ...

htmlangularjsspringjsp

Instructions for altering the hue of a canvas square when the cursor hovers over it

I want to implement a feature where the color of a tile changes when the user hovers their mouse over it, giving it a whitened effect. The tileset I am using consists of 32x32 tiles. Below are the scripts for reference. MAP.JS function Map(name) { ...

javascriptjquerycanvas

Experiencing discrepancies in pixel height while conducting tests using Nightwatch

Let me start by sharing some details about my machine setup: Operating System: CentOS 7 Graphics Drivers: kmod-nvidia (dedicated GPU) I am currently testing a webpage using Nightwatch, and one of the requirements is to ensure that a background image&apo ...

javascriptcssselenium-webdriverphantomjsnightwatch.js

Using Vue.js to fade out one image while fading in another

This piece of code is designed to load a random picture from a collection and replace it with another picture every few seconds, assuming the images are located on the server. I am attempting to implement smooth fading transitions for the pictures, but I ...

javascriptvue.jsfadeinfadeout

Using Thymeleaf in Spring MVC to link a .css file to your webpage

I am currently working on a project using spring MVC and Thymeleaf. I have encountered an issue regarding how to reference my CSS files within my folder structure: src main webapp resources myCssFolder myCssFile.css web-inf ...

htmlcssspringspring-mvcthymeleaf

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

Retrieve a distinct HTML onclick event using VBA

I need some assistance because I have a major issue that I can’t solve or find help for online. Here is the code I am dealing with: <span class="test taLnk hvrIE6" onclick="ta.trackEventOnPage('Hotel_Review' ,'URL_HOTEL|text|2| ...

htmlexcelvbaweb-scrapinghref

The jQuery datatable offers a convenient date function that allows for date manipulation in milliseconds format

Recently, I have been working on updating the task owner ID using a lookup field selection in my code. The tasks are displayed based on the selected date from a datepicker value under the query in the controller. However, I encountered an issue where the a ...

javascriptjqueryhtmldatatable

Customize DAT.GUI: adjust the width of the text field to accommodate longer text entries

Is there a way to increase the width of a text field using DAT.GUI library in JavaScript? According to this source, you can achieve it by setting the style attribute for the first controller like this: gui.add(params, 'StartingVector').name(&apo ...

javascriptcssdat.gui

Creating a jquery DataTable from HTML generated by angular $sce can be done by following these steps

I have created an Angular controller that takes data and generates an HTML table from it. The generated table is being displayed on the page. Now, I want to apply jQuery data tables using that scope variable. The variable contains the HTML code of the tabl ...

javascriptjqueryhtmlangularjsdatatables

What is the best way to add a "Submit" button to a JavaScript/HTML calculation form?

I'm looking to integrate a "Submit" button that triggers the formula execution upon clicking, but I'm struggling to establish the connection between the submit button and the code so that the total emissions only update when the button is activat ...

javascripthtmlforms

The presence of the `class` attribute on the `td` element

Is there a reason why the rows with the "odd" td class in this script do not toggle to blue like the rows without the "odd" class? EDIT: When you click on a row (tr), it is supposed to turn blue (.hltclick) and return to its original color when clicked ag ...

jqueryhtmlcss

Exploring the DOM structure to update a child element next to its sibling

const $jq = $; $jq('#section-a li').on('click', function() { const el = $jq(this); el.addClass("answerPick").siblings(".answer").removeClass("answerPick"); if (el.hasClass("answerPick")) { el.children(".circle").addClass(" ...

javascriptjqueryhtml

Implementing jQuery validation on tab key press

Is it possible to implement field validation in JSP while tabbing through the fields using jQuery? Here is a snippet of my JSP page: <form:form method="POST" commandName="test" name="testname" onclick="submitForm();" > <div> <form:inpu ...

javascriptjavajqueryjspspring-mvc

Is the runTest.ts class in the vscode-test setup ever utilized in the project? Its purpose remains unclear even in the example project

Being a novice to Typescript, JavaScript, and VScode Extensions I have set up a vscode-test following the guidelines provided here: https://code.visualstudio.com/api/working-with-extensions/testing-extension#custom-setup-with-vscodetest Based on the hel ...

javascripttypescriptvisual-studio-codevscode-extensionsvscode-debugger

gulp-uglify is responsible for the malfunction of the constructor.name property

When I make a change in my gulpfile.js by commenting out the line .pipe(uglify({ preserveComments: 'some'})) my code appears neat and tidy, and the next line functions correctly: if(Mystudy.constructor.name != "MyStudyView") However, ...

javascriptnode.jsnpmgulpgulp-uglify

JSLint, the popular Javascript validation tool, has detected an error - Unexpected global variable usage:

I recently ran my custom gallery script through JSLint and managed to resolve all errors except for one. The error in question is the implied global error. Should I be concerned about this error or can it be ignored? Is there any action I need to take to a ...

javascriptjqueryvalidationjslint

Nginx and Socket.io: Issues with client-server connection not functioning properly

Hello everyone! I am currently in the process of deploying my application, which utilizes React and NodeJs. However, I have encountered an issue with integrating Socket.io with Nginx. My approach involves editing the Nginx file using the command: sudo ...

javascriptnode.jsreactjsnginxsocket.io

What is the best way to adjust the height of an IFrame to match the size of its content?

I attempted to set the height of an IFrame to 100% (similar to setting a <div> to height:auto). I specified the height attribute in the <iframe> tag as 100% and also set the height in the style to 100%, but it doesn't appear to be functio ...

javascriptjqueryhtmlcssiframe