Steps for designing a popup modal that triggers upon calling a specific function

Question

Steps for designing a popup modal that triggers upon calling a specific function

I'm facing some challenges while trying to develop a modal that pops up when a specific section of an image map is clicked.

Here is the snippet from my HTML file:

 <head link rel="stylesheet" href="ryanspagecss.css"></head>
<body>
    <div class="main">
    <script src="lotrpage.js"></script>
    <map name="lotrmap">
        <area shape="poly" href="" coords="405, 50, 463, 80, 461, 141, 408, 173, 354, 144, 353,81" onclick="playerSelect()">
    </map>

    <div id="selectModal" class="selectModal">
            <p>Content inside the modal...</p>
    </div>

Below is the CSS code:

    #selectModal {
  width: 500px;
  overflow: hidden;
  background: pink;
  box-shadow: 0 0 10px black;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  padding: 10px;
  text-align: center;
  display: none;
}

And here is the JavaScript part:

    function playerSelect(){
      //Show Modal
      let selectModal = document.getElementById('selectModal');
      selectModal.style.display = "block";
  
  }

I know I should change the display value from none to block in order to show the Div element, and this is what my JavaScript function aims to achieve. However, clicking on the image doesn't trigger any action. What could be missing in this implementation?

javascript html css

Answer 1

Answer №1

When utilizing the

document.getElementById('selectModal')

method, it searches for an element in your HTML with an id matching selectModal. However, in this instance, your modal has an id of selectOwner.

To address this issue, consider updating your code to

document.getElementById('selectOwner')

If you intend to locate the modal by its class name instead, you would need to use

document.getElementsByClassName('selectModal')

. Keep in mind that this will return a group of divs containing this class (technically an HTMLCollection, not an array)

Answer 2

When utilizing the

document.getElementById('selectModal')

method, it searches for an element in your HTML with an id matching selectModal. However, in this instance, your modal has an id of selectOwner.

To address this issue, consider updating your code to

document.getElementById('selectOwner')

If you intend to locate the modal by its class name instead, you would need to use

document.getElementsByClassName('selectModal')

. Keep in mind that this will return a group of divs containing this class (technically an HTMLCollection, not an array)

Answer 3

Answer №2

The element you are trying to select with the ID selectModal does not exist in the document. To fix this, make sure you add id="selectModal" to your div.

Answer 4

The element you are trying to select with the ID selectModal does not exist in the document. To fix this, make sure you add id="selectModal" to your div.

Answer 5

Answer №3

After discovering that a commenter's code and a small snippet of my own code worked on JSFiddle, I decided to test if my CSS would successfully change the color of some random text... unfortunately, it didn't.

I soon realized that I had incorrectly linked my CSS file. Despite not receiving any syntax errors, I failed to notice this mistake.

Instead of

<head link rel="stylesheet" href="ryanspagecss.css"></head>

It should have been

<head> <link rel="stylesheet" href="ryanspagecss.css"> </head>

Answer 6

After discovering that a commenter's code and a small snippet of my own code worked on JSFiddle, I decided to test if my CSS would successfully change the color of some random text... unfortunately, it didn't.

I soon realized that I had incorrectly linked my CSS file. Despite not receiving any syntax errors, I failed to notice this mistake.

Instead of

<head link rel="stylesheet" href="ryanspagecss.css"></head>

It should have been

<head> <link rel="stylesheet" href="ryanspagecss.css"> </head>

Answer 7

Answer №4

Absolutely, you have a clear understanding of the difference between using display: "none" and display: "block".

After testing your code on my local machine, I found that nothing appeared on the screen.

To address this issue, there are two potential solutions:

One option is to utilize the map & area tags with an image to create interactive elements in HTML. You can try it out by clicking here.
Alternatively, you can insert a simple paragraph tag in your HTML code that will display text and trigger the modal when clicked. Insert the following code snippet into your HTML:
```
 <div onclick="playerSelect()">
     <p>
         Hi, Please click me to see the modal
     </p>
 </div>
```

Answer 8

Absolutely, you have a clear understanding of the difference between using display: "none" and display: "block".

After testing your code on my local machine, I found that nothing appeared on the screen.

To address this issue, there are two potential solutions:

One option is to utilize the map & area tags with an image to create interactive elements in HTML. You can try it out by clicking here.
Alternatively, you can insert a simple paragraph tag in your HTML code that will display text and trigger the modal when clicked. Insert the following code snippet into your HTML:
```
 <div onclick="playerSelect()">
     <p>
         Hi, Please click me to see the modal
     </p>
 </div>
```

Steps for designing a popup modal that triggers upon calling a specific function

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Having difficulty rendering image in vueJS

ASP.Net - Unexpected JSON Format Error

Is it possible to sanitize user input without relying on !important?

Customizing the appearance of different shapes using colors in three.js

The issue lies in the transmission of video file data through the peer.js connection.send function

Can the value of a key be changed to match the condition in a find() query when using Mongoose?

Retrieve a value using the jQuery each() method

A promise is given when a value triggers a function

express/node: You are unable to define headers once they have already been sent to the client

Safari is having trouble showing the webpage, although it is working fine on Internet Explorer, Chrome, and Firefox

The error message in threejs is "GL_INVALID_OPERATION: Attempting to perform an invalid operation on

AngularJS ng-repeat is not updating when the state changes

Can anyone suggest a more efficient approach to handling variations using CSS?

What steps are involved in integrating OpenCV into a JavaScript project?

How to Align Checkbox Buttons in a Bootstrap 4 Row

Repositioning JQuery Autocomplete Results

Obtain the outline shape in ThreeJS (duplicate border)

Resolving the issue of the 'Failed to load resource: net::ERR_FILE_NOT_FOUND' error

Is there a way to synchronize the autohide duration for both the LinearProgress MUI and SnackBar components?

Accessing a text document from a specific folder