Video as a pop up instead of an image

HTML & CSS
41

The X close button yes.

What I have so far: https://jsfiddle.net/wmLugnbv/2/

That animation I added, I would want that to occur, after the modal is clicked.

42

Ok, for the third time just remove the overflow:hidden from .modal-content.:slight_smile:

Which animation is that? I didn’t see any animation? What is being animated exactly and what’s it supposed to be doing?

2 Likes
43

You already have some js to detect when the modal is being clicked and it removes the open class form the body… It would then be possible to trigger anything else on that page by testing the body element that doesn’t have open.

e.g.

body:not(.open) .myAnimationwhereverItIs{ CSS stuff here }

44

I don’t understand: https://jsfiddle.net/hcp68abx/

(function manageModal() {
  const myModal = document.querySelector("#myModal");
   let player;

  function modalClickHandler() {
    if (player) {
      player.destroy();
    }
    console.log('hit');
    myModal.classList.remove("open");
  }

  myModal.addEventListener("click", modalClickHandler);
}());

<div id="myModal" class="modal open ">
  <div class="modal-content ">
    <div class=" close blog-pager ">
      <a title="Exit" aria-label="Close"></a>
    </div>

    <div class="ratio-keeper ">
      <div class="video "></div>
    </div>
  </div>
</div>


<div class="panel-left"></div>
<div class="panel-right"></div>

body:not(.open) .myAnimationwhereverItIs{
  
  
}

.panel-left,
.panel-right {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0%;
  /*background-image: url("https://picsum.photos/600");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;*/
  overflow: hidden;
}

.panel-left {
  left: 0;
  /*background-color: rgb(91, 96, 106);*/
}

.panel-right {
  right: 0;
  /*background-color: rgb(229, 211, 211);*/
}

.panel-left,
.panel-right {
  position: fixed;
  z-index:1;/* adjust to suit*/
}

.panel-left::before,
.panel-right::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 200%;
  top: 0;
  left: 0;
  background-color: black;
  /*background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 0;*/
}

.panel-right::before {
  left: -100%;
}

 .panel-left {
  /* transform: translateX(-100%);*/
  /*transform: translateX(calc(-100% - 1px));*/
  animation: slideLeft 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000) forwards;
  
  animation-delay: 700ms;
}

@keyframes slideLeft {
  to {
    transform: translateX(calc(-100% - 1px))
  }
}

/*.panel-left::before {
    background: rgba(0, 0, 0, 0.5);
}*/

.panel-right {
  /*transform: translateX(100%);*/
  /*transform: translateX(calc(100% + 1px));*/
  animation: slideRight 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000) forwards;
  animation-delay: 700ms;

}

@keyframes slideRight {
  to {
    transform: translateX(calc(100% + 1px))
  }
}
45

You were supposed to change that class name to match the class names of the elements you want to animate.

As it stands it won’t work anyway because I forgot the open class is being added to the modal not the body. You could instead use the modal open class but you would need the html to stay the same as it is now with the panels as siblings of the modal.

Then you could add this css to the end of the css as it over-rides some rules.


.panel-right,
.panel-left{
  animation-play-state: paused;
  z-index:0;
}

.modal:not(.open) ~ .panel-right,
.modal:not(.open) ~ .panel-left{
  animation-play-state: running;
}

When you click the X to close the modal the panels will open.

In your example you put the [panels on top of the modal so nothing was visible and there was nothing to click had the panels not already opened.

46

What am I supposed to be doing, I’m confused still.

I wasn’t able to figure it out.

i will wait, because I am still confused.

47

In your fiddle in post #44 add the css I gave you in post #45 and put it at the end of the css and all will work.

You don’t have to change anything else.

1 Like
48

That doesn’t look right: https://jsfiddle.net/xvms870b/1/

819×296 5.57 KB

I fixed it: https://jsfiddle.net/mnwsjhc4/1/

49

What is that black ghost area off to the right side?

That disappears after the modal is clicked.

I can’t figure out what is making that.

Image is from html page.

Can be seen here:
https://jsitor.com/laBIpLbVuj

Can be seen here:
https://jsfiddle.net/d5ubzoc8/

Can be seen on codepen.

That might be easier to see.

background-color: rgb(22 22 22 / 80%);

866×321 293 KB

After modal is clicked, it disappears:

938×439 259 KB

50

I think you’ve lost the plot now :slight_smile:

That’s all the videos showing under the modal’s partially transparent background. Just go to a full page view. That’s how people know it’s a modal because if it was a solid color then they wouldn’t know there was anything underneath. That’s how nearly all modals work by fading out the content underneath.

It’s the transparency on this rule that does it.

background-color: rgb(22 22 22 / 80%);

Just use background:#000 if you want it all blocked out but I think that totally defeats the purpose of a modal.

3 Likes
51

How would I apply the images as a plus sign,

so that they appear after modal is clicked:

Modal code:
https://jsfiddle.net/c27v03wt/5/

Responsive images as a plus sign:

https://jsfiddle.net/ywt65fdj/2/

Where it would be centered in the middle.

52

Thread closed, as there is already a new topic dealing with that question.

2 Likes