Modal is not closing

JavaScript
1

Check out my github repo
I have users webpage, when i click on see more details button, I get modal window for each user but modal closing is not working. And I am not getting it

2 
const userModal = document.getElementsByClassName("userModal");

modalCloseBtn.addEventListener("click", function () {
  // ...

But getElementsByClassName doesn’t return an element, it returns an array-like structure of elements. You are treating it as if it were an element. That’s why when open the dev tools and look at the console, I see this:

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at script.js:168:15

That is not an element so it does not have that method. You’ve either got to drill down into that “array” and select the one you want, or you have to use something like an id.

I also notice that you are creating a new modal when selecting then just hiding it when removing? I think it should work one way or the other - either create and then remove it, or have it always there, but show/hide it.

3

Thankyou, @kevinSmith will u please elaborate on this thing, I am stuck on this since 2 to 3 days.

4

i have also tried forEach method on modalCloseBtn but not working with querySelectorAll
if i use querySelector it works for only single time without using forEach

5

It seems to be working. What is your question?

6

Looks like they fixed it by adding this.parentElement.remove() as an inline on the element.

Not sure if they are asking for a different solution or what?

From briefly looking at the git history. Because createUserModal is called inside a forEach loop you would have to call closingModal after the loop is done and all the elements are added. As said, you would still need to get all the elements correctly and loop them.

Or you can add the listener on some parent elements and do event delegation.

7

Yes I have used event delegation successfully now. Gr8, it works, now I want to ask another thing , modal opens at same position everytime.
I want it to open where I have clicked.
I need to adjust some css I think.
And also have to write media queries for mobile devices.

8

You have to append the modal inside the card, so the card is the parent.

If you want to use position fixed on the modal you have to make the parent (the card) the containing block, otherwise it will be the viewport.

If you apply contain: layout; to the parent it should make the fixed position of the child relative to the parent.

9

Working fine now but, But now I want to close previous modal on opening new one. currently if one modal is open and if i click for opening modal for other user the older modal doesn’t get closed.

10

Do you need more than one modal? For something like this, my instinct would be to have just one modal that is always there, that is by default closed. When I need a new modal, I give it the new info and open it. When I am done with it, I close it. Optionally, you can clear out the data.

11

How to use only modal with using data change dynamically

12

I don’t do much vanilla DOM manipulation. But you write to the modal element and change its HTML before you show it.

13

  1. I don’t know why you would want to be able to interact with the buttons when a modal is open. The way you have it set up with an overlay doesn’t suggest that is the intended usage.

  2. Inside the event handler you have in userDetails for each button click you can pass the click target parent element to createUserModal and append the modal to that parent element.

14

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.