Modal isn't working

corvo · June 1, 2020, 3:30pm

Hello! I have been struggling with this modal for almost a week, trying different tutorials but nothing is helping me. I want to be able to click on an image and have a modal with a video show up. I don’t understand why it doesn’t open the modal when I click the image, and right now the modal isn’t even showing up when I disable the display: none; on the modal’s main div.
However, when I insert my code on codepen it kind of works.

relevant part of the code:

<!DOCTYPE html>

<html >

<head>

  <title>Document</title>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
#filme {

  width: 80%;

  display: flex;

  justify-content: center;

  align-items: center;

  margin-top: 324px;

}

.not10 {

  transform: translate(24px, -316px);

}

.bol6 {

  transform: translate(-424px, 86px);

  position: absolute;

}

.bol7 {

  transform: translate(-486px, 412px);

  position: absolute;

}

.bol8 {

  transform: translate(368px, 546px);

  position: absolute;

}

.not11 {

  transform: translate(464px, 298px);

  position: absolute;

}

#exFilme {

  width: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  /* margin-top: 400px; */

}

#XFilme {

  display: flex;

  flex-direction: column;

  justify-content: center

}

.esconderX {

  font-size: 288px;

  font-weight: 700;

  color: var(--roxo);

  z-index: -1;

  position: absolute;

  transform: translate(568px, -148px);

}

#button {

   width: 648px;

  height: 342px;

  /*background-image: url(imagens/8emeio.png);

  background-size: cover; */

  cursor: pointer;

}

#text3 {

  width: 348px;

  display: flex;

  flex-direction: column;

}

#tit1 {

  margin-bottom: 0px;

}

.titulo {

  font-size: 50px;

}

.bg-modal {

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.7);

  position: absolute;

  /* top: 0; */

  display: flex;

  justify-content: center;

  align-items: center;

  display: none;

}

.modal-content {

  /* width: 50%; */

  height: 80%;

  background-color: white;

  border-radius: 4px;

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 36px;

  box-sizing: border-box;

  position: relative;

}

.close {

  position: absolute;

  top: 6px;

  right: 12px;

  font-size: 28px;

  font-weight: 700;

  color: var(--roxo);

  cursor: pointer;

}

.video {

  height: 100%;

}
</style>

  <script>
document.getElementById('button').addEventListener('click', function() {

  document.querySelector('.bg-modal').style.display = 'flex';

});

document.querySelector('.close').addEventListener('click',function(){

  document.querySelector('.bg-modal').style.display = 'none';

});
</script>

</head>

<body>
<section id="filme">

  <img src="imagens/not9.png" class="not10">

  <img src="imagens/bolas6.png" class="bol6">

    

  <div id="exFilme">

    <div id="XFilme">

      <div class="esconderX"><p>X</p></div>

      <a id="button" class="button">

        <img  width="648px" src="imagens/8emeio.png">

      </a>

    </div>

    <div id="text3">

      <p id="tit1" class="titulo">Excerto do filme</p>

      <p>Pequena introdução ...</p>

    </div>

  </div>

  <img src="imagens/not10.png" class="not11">

  <img src="imagens/bolas7.png" class="bol7">

  <img src="imagens/bolas8.png" class="bol8">

<div class="bg-modal">

  <div class="modal-content">

    <div class="close">X</div>

    <video class="video">

      <source src="videos/excertofilme.mp4" >

      <source src="videos/excertofilme_1.ogv" >

    </video>

  </div>

</div>
</section>
</body>

</html>

codepen link

I truly don’t get what is happening, specially since I am quite new to javascript, it would be awesome if you could help me!

Thank you!

DaveMaxwell · June 1, 2020, 5:12pm

What is the code in your “regular” page doing? Like you said, the codepen does work (though you need the top: 0 for it to be "right’)

That being said, you are going to have a maintenance nightmare with that many position: absolute stylings. IMHO, of course…

PaulOB · June 1, 2020, 5:25pm

As a start try changing the modal to fixed and add co-ordinates like this.

.bg-modal {
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  position:fixed;
  top:0;
  left:0;
  overflow:auto;
  display: flex;
  justify-content: center;
  align-items: center;
display: none;
}

Then we can take it from there as to what you want to happen next

corvo · June 1, 2020, 6:19pm

What do you mean as “regular page”? That section is inside of body, nothing else is over it.

It looks like this on my css file:

body {

  margin:0;

  background-color: #000;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  width: 100%;

  color: white;

  font-size: 24px;

}

although there are a few more sections above the one with the modal, and a div for a background.

I tried commenting the rest of the code, to see if it was something there stopping it from working, but still nothing happened when i clicked the button/image.

I am a beginner, to be honest, probably there are a few better ways to do what I am doing with position: absolute (I have a couple of objects “floating” around on most divs)

corvo · June 1, 2020, 6:20pm

Ok I tried changing that, but still nothing happened.
What I want to happen is the modal (class=“bg-modal”), containing a video, to open over the rest by pressing the image (id=“button”)
I tried commenting the rest of the code, to see if it was something there stopping it from working, but still nothing happened when i clicked the button/image.

DaveMaxwell · June 1, 2020, 6:58pm

I meant the page you said it doesn’t work on but it does on the codepen (kinda)

PaulOB · June 1, 2020, 7:10pm

If you are talking about the fact that your missing image is hard to click then you need to set the anchor to display:block. If you had a real image then the anchor would surround it. Dimensions do not apply to inline elements like anchors.

Here is your code forked with just the basic code in place. (Just click the red background which would be your image.)

corvo · June 1, 2020, 7:10pm

It is my index page, it has another video (this one is occupying the whole width of the page) and a couple of links to other pages with my website. That part of the code is doing alright.

corvo · June 1, 2020, 7:39pm

Thank you for the effort, I gave your code a try and it still didn’t work on my page. I then created a new file on my editor and placed your code, thinking that it might just be an error on the other one, but it didn’t work either. Although, when I commented display: none the modal now showed up on both.

Am I calling the javascript file right? My head looks like this:

<head>

  <title>Document</title>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="index.css">

  <link rel="stylesheet" href="index_var.css">

  <script src="modal.js" type="text/javascript"></script>

</head>

PaulOB · June 1, 2020, 8:50pm

Put the script at the end of the html before the closing body tag.

<script  src="modal.js"></script>
</body>
</html>

Otherwise the element doesn’t exist when the js is run.

corvo · June 2, 2020, 10:17pm

Yes, it finally works! Thank you so much for the help, you saved me!

system · September 2, 2020, 5:17am

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