What if I only want:
the close button to fade in.
no curtain down.
and for the curtain to be there when you click on a button a 2nd time.
Clicking the close button removes everything, back to buttons on the screen.
You can do that with the code I just gave you and then adjust the css so that the panel only animates upwards,
e.g.
.
panel {
position: absolute;
height: 100%;
width: 100%;
top: 0;
background: repeating-linear-gradient(
calc(var(--angle1) * 1deg),
#ffffff00 0,
#ffffff00 var(--wide),
#ffffff1a calc(var(--wide) + 1px),
#0000004d calc(var(--wide) + 2px),
#ffffff00 calc(var(--wide) + 5px)
),
repeating-linear-gradient(
calc(calc(var(--angle2) + 90) * 1deg),
#ffffff00 0,
#ffffff00 var(--wide),
#ffffff1a calc(var(--wide) + 1px),
#0000004d calc(var(--wide) + 2px),
#ffffff00 calc(var(--wide) + 5px)
);
background-color: #222;
border-bottom: 2px solid #191919;
background-repeat: no-repeat;
z-index: 0;
overflow: hidden;
transform: translateY(0%);
transition: .1s;
}
.panel.slide {
transition: 8s;
transition-delay: 4s;
transform: translateY(calc(-100% - 1px));
}
I’m probably offline for a while now but you have all you need in place.
How this code worked is: https://jsfiddle.net/mL1n64ra/3/
After the panel was up, then the close button starts fading in:
const panels = document.querySelectorAll(".panel");
const closeButtons = document.querySelectorAll(".close");
panels.forEach(function(panel) {
panel.addEventListener("transitionend", function () {
closeButtons.forEach(function(closeButton) {
closeButton.classList.add("visible");
});
});
});
That is not how this code works: https://jsfiddle.net/0e6c5wm8/1/
In this code the close button starts fading in right away.
function openModal(target) {
d.querySelector(target).classList.add("active");
d.querySelector(target + " .panel").classList.add("slide");
d.querySelector(target + " .close").classList.add("visible");
}
closeModals.forEach(function(modal) {
modal.addEventListener("click", function() {
var currentModal = this.closest(".modal");
const animated = currentModal.querySelector(".panel");
currentModal.querySelector(".panel").classList.remove("slide");
animated.addEventListener("transitionend", () => {
console.log("Animation ended");
currentModal.classList.remove("active");
currentModal.querySelector(".close").classList.remove("visible");
modalClickHandler();
}, {once : true});
});
});
Written this way worked: Is this good?
or, do I not need all of this?
https://jsfiddle.net/mya8Lkch/4/
function openModal(target) {
const panels = document.querySelectorAll(target + " .panel");
const closeButtons = document.querySelectorAll(target + " .close");
d.querySelector(target).classList.add("active");
panels.forEach(function(panel) {
panel.classList.add("slide");
panel.addEventListener("transitionend", function() {
closeButtons.forEach(function(closeButton) {
closeButton.classList.add("visible");
});
});
});
}
closeModals.forEach(function(modal) {
modal.addEventListener("click", function() {
var currentModal = this.closest(".modal");
const animated = currentModal.querySelector(".panel");
currentModal.querySelector(".panel").classList.remove("slide");
animated.addEventListener("transitionend", function() {
console.log("Animation ended");
currentModal.classList.remove("active");
currentModal.querySelector(".close").classList.remove("visible");
modalClickHandler();
}, {
once: true
});
});
});
Well you could just set a delay in the css to match the time of the animation.
Alternatively just do the same as you did before and add the visible class after the slide has finished but do it from open modal and not a separate function
Put it in here:
function openModal(target) {
d.querySelector(target).classList.add("active");
d.querySelector(target + " .panel").classList.add("slide");
d.querySelector(target + " .close").classList.add("visible");
}
Where it says add the visible class you would do similar to the close modal and only add it on transition end.
Look at the closemodal for the basics as it is very similar.
Alternatively just do the same as you did before and add the visible class after the slide has finished but do it from open modal and not a separate function
Means I don’t need to do this?
function openModal(target) {
const panels = document.querySelectorAll(target + " .panel");
const closeButtons = document.querySelectorAll(target + " .close");
d.querySelector(target).classList.add("active");
panels.forEach(function(panel) {
panel.classList.add("slide");
panel.addEventListener("transitionend", function() {
closeButtons.forEach(function(closeButton) {
closeButton.classList.add("visible");
});
});
});
}
closeModals.forEach(function(modal) {
modal.addEventListener("click", function() {
var currentModal = this.closest(".modal");
const animated = currentModal.querySelector(".panel");
currentModal.querySelector(".panel").classList.remove("slide");
animated.addEventListener("transitionend", function() {
console.log("Animation ended");
currentModal.classList.remove("active");
currentModal.querySelector(".close").classList.remove("visible");
modalClickHandler();
}, {
once: true
});
});
});
No don’t do that.
You don’t need for each inside the open or close modals. That’s the beauty of the function as it provides a reference to the items in hand.
Look at my close modal for the way to do it. You don’t need to do anything to the close modal only to the open modal function.
add the visible class after the slide has finished but do it from open modal
Take this:
panel.classList.add("slide");
closeButton.classList.add("visible");
out of here:
function openModal(target) {
const panels = document.querySelectorAll(target + " .panel");
const closeButtons = document.querySelectorAll(target + " .close");
d.querySelector(target).classList.add("active");
panels.forEach(function(panel) {
panel.classList.add("slide");
panel.addEventListener("transitionend", function() {
closeButtons.forEach(function(closeButton) {
closeButton.classList.add("visible");
});
And put it in here?
I am confused.
function openModal(target) {
d.querySelector(target).classList.add("active");
d.querySelector(target + " .panel").classList.add("slide");
d.querySelector(target + " .close").classList.add("visible");
}
closeModals.forEach(function(modal) {
modal.addEventListener("click", function() {
var currentModal = this.closest(".modal");
const animated = currentModal.querySelector(".panel");
currentModal.querySelector(".panel").classList.remove("slide");
animated.addEventListener("transitionend", () => {
console.log("Animation ended");
currentModal.classList.remove("active");
currentModal.querySelector(".close").classList.add("visible");
modalClickHandler();
}, {once : true});
});
});
No don’t take anything out just do the same but with correct references.
Here’s the 2 functions with it added. This is a working example.
function openModal(target) {
d.querySelector(target).classList.add("active");
d.querySelector(target + " .panel").classList.add("slide");
const animated = d.querySelector(target + " .panel");
animated.addEventListener("transitionend", () => {
d.querySelector(target + " .close").classList.add("visible");
}, {
once: true
});
}
closeModals.forEach(function(modal) {
modal.addEventListener("click", function() {
var currentModal = this.closest(".modal");
const animated = currentModal.querySelector(".panel");
currentModal.querySelector(".panel").classList.remove("slide");
animated.addEventListener("transitionend", () => {
console.log("Animation ended");
currentModal.classList.remove("active");
currentModal.querySelector(".close").classList.remove("visible");
modalClickHandler();
}, {
once: true
});
});
});
1 Like
removing fade/visible from the close button.
This would get changed to what? https://jsfiddle.net/e3fvwd1h/2/
I am stuck.
function openModal(target) {
d.querySelector(target).classList.add("active");
d.querySelector(target + " .panel").classList.add("slide");
const animated = d.querySelector(target + " .panel");
animated.addEventListener("transitionend", () => {
d.querySelector(target + " .close").classList.add("visible");
}, {
once: true
});
}
closeModals.forEach(function(modal) {
modal.addEventListener("click", function() {
var currentModal = this.closest(".modal");
const animated = currentModal.querySelector(".panel");
currentModal.querySelector(".panel").classList.remove("slide");
animated.addEventListener("transitionend", () => {
console.log("Animation ended");
currentModal.classList.remove("active");
currentModal.querySelector(".close").classList.remove("visible");
modalClickHandler();
}, {
once: true
});
});
});
css looks like this now:
.close {
transform: translatey(100%);
position: absolute;
inset: 0 0 0 0;
/*margin: auto auto 0;*/
top: auto;
bottom: -1px;
margin: auto;
right: 0;
left: 0;
/*margin: 10px auto 0;*/
width: 47px;
height: 47px;
background: blue;
border-radius: 50%;
border: 5px solid red;
display: flex;
align-items: center;
justify-content: center;
}
.close::before,
.close::after {
content: "";
position: absolute;
width: 100%;
height: 5px;
background: red;
transform: rotate(45deg);
}
.close::after {
transform: rotate(-45deg);
}
All of this would get removed:
/* opacity: 0;
transition: opacity 3s ease-in;
transition-delay: 1s;
pointer-events: none;
}
/.close.visible {
opacity: 1;
pointer-events: auto;
cursor: pointer;
}*/
And then the javascript would get changed to what?
https://jsfiddle.net/pbsvLu8h/2/
function openModal(target) {
d.querySelector(target).classList.add("active");
d.querySelector(target + " .panel").classList.add("slide");
d.querySelector(target + " .close").classList.add("visible");
}
closeModals.forEach(function(modal) {
modal.addEventListener("click", function() {
var currentModal = this.closest(".modal");
const animated = currentModal.querySelector(".panel");
currentModal.querySelector(".panel").classList.remove("slide");
animated.addEventListener("transitionend", () => {
console.log("Animation ended");
currentModal.classList.remove("active");
currentModal.querySelector(".close").classList.remove("visible");
modalClickHandler();
}, {once : true});
});
});
That is the codepen example code you provided: post #31
Got it: https://jsfiddle.net/mb9akh0z/2/
function openModal(target) {
d.querySelector(target).classList.add("active");
d.querySelector(target + " .panel").classList.add("slide");
}
closeModals.forEach(function (modal) {
modal.addEventListener("click", function () {
var currentModal = this.closest(".modal");
currentModal.classList.remove("active");
currentModal.querySelector(".panel").classList.remove("slide");
});
});
1 Like
Why is this in the code: transform: scale(1);
What is it for, what is it supposed to do? https://jsfiddle.net/mb9akh0z/4/
Is that something that has to be in the code for it to work?
I guess scale 1 means default size.
In my original example I scaled the modal up from small to large but it looks you removed the transition.
If you used the following you would see the effect.
.modal {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex;
background-color: rgba(0, 0, 0, 0.4);
transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
transform: scale(0);
opacity: 0;
pointer-events: none;
z-index: -99;
overflow:auto;
border-radius: 50%;
transition:3s ease;
}
.modal.active {
display: flex;
opacity: 1;
transform: scale(1);
z-index: 1000;
pointer-events: initial;
border-radius: 0;
}
However you only need that if you want the scaling effect otherwise the transforms and transitions can be removed.
1 Like
Last updated code: https://jsfiddle.net/1cnp2zLh/2/
Asked AI to improve the code.
Prompt I used:
write this function here: (function manageAllButtons() {
in the same style and format as this one:
use this as a template code to go by: (function managePageB() {
Does this look better?
AI:
(function manageAllButtons() {
function openModal(target) {
const modal = document.querySelector(target);
modal.classList.add("active");
modal.querySelector(".panel").classList.add("slide");
}
function addPlayerToButtons() {
const modalButtons = document.querySelectorAll(".playButton");
modalButtons.forEach(function(button) {
button.addEventListener("click", function() {
const target = this.dataset.destination;
openModal(target);
switch (target) {
case "#ba":
loadPlayer.add(".buttonA", {
videoId: "CHahce95B1g"
});
break;
case "#bb":
loadPlayer.add(".buttonB", {
videoId: "CHahce95B1g"
});
break;
case "#bc":
loadPlayer.add(".buttonC", {
videoId: "CHahce95B1g"
});
break;
default:
// code block
}
});
});
}
function removePlayer() {
videoPlayer.players.forEach(function(player) {
player.destroy();
});
console.log("playerRemoved");
}
function closeModal(modal) {
modal.classList.remove("active");
modal.querySelector(".panel").classList.remove("slide");
removePlayer();
}
function addCloseEventToModals() {
const closeModals = document.querySelectorAll(".close");
closeModals.forEach(function(modal) {
modal.addEventListener("click", function() {
const currentModal = this.closest(".modal");
closeModal(currentModal);
});
});
}
addPlayerToButtons();
addCloseEventToModals();
}());
There is a duplicate transition selector in there.
I am using this in it:
transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
transform: translate(0, -25%);
Do I want to add the button code https://jsfiddle.net/j8agwcb5/3/
to The modal code here: https://jsfiddle.net/j759xac4/1/
or, do I want to add it to the code where modal is removed: https://jsfiddle.net/qouchgfx/
Which makes the most sense?
Working on the code with modal removed:
I got this far: https://jsfiddle.net/hk3zLunx/5/
I can’t figure out how to get the exit button working, where it takes you to the sliding panels.
Next, am I supposed to figure out how to combine these two together?
This:
(function manageAllButtons() {
function openModal(target) {
const modal = document.querySelector(target);
modal.classList.add("active");
modal.querySelector(".panel").classList.add("slide");
}
function addPlayerToButtons() {
const modalButtons = document.querySelectorAll(".playButton");
modalButtons.forEach(function(button) {
button.addEventListener("click", function() {
const target = this.dataset.destination;
openModal(target);
switch (target) {
case "#ba":
loadPlayer.add(".buttonA", {
videoId: "CHahce95B1g"
});
break;
case "#bb":
loadPlayer.add(".buttonB", {
videoId: "CHahce95B1g"
});
break;
case "#bc":
loadPlayer.add(".buttonC", {
videoId: "CHahce95B1g"
});
break;
default:
// code block
}
});
});
}
function removePlayer() {
videoPlayer.players.forEach(function(player) {
player.destroy();
});
console.log("playerRemoved");
}
function closeModal(modal) {
modal.classList.remove("active");
modal.querySelector(".panel").classList.remove("slide");
removePlayer();
}
function addCloseEventToModals() {
const closeModals = document.querySelectorAll(".close");
closeModals.forEach(function(modal) {
modal.addEventListener("click", function() {
const currentModal = this.closest(".modal");
closeModal(currentModal);
});
});
}
addPlayerToButtons();
addCloseEventToModals();
}());
With this?
(function managePageA() {
function showExit(panelSelector, exitSelector) {
const panel = document.querySelector(panelSelector);
const closeButton = document.querySelector(exitSelector);
panel.addEventListener("transitionend", function() {
closeButton.classList.add("visible");
});
}
function hideContainer(containerSelector) {
const container = document.querySelector(containerSelector);
container.classList.add("hide");
}
function showContainer(containerSelector) {
const container = document.querySelector(containerSelector);
container.classList.remove("hide");
}
function resetPage() {
showExit(".panel-container", ".exit");
hideContainer(".containerA", ".containerC");
showContainer(".outer-container");
}
function modalClickHandler() {
// Destroy the first player if it exists
if (videoPlayer.players[0]) {
videoPlayer.players[0].destroy();
}
resetPage();
window.scrollTo(0, 0);
// Initialize the rest of the players when the modal is clicked
loadPlayer.add(".playa", {
videoId: ["0dgNc5S8cLI", "mnfmQe8Mv1g", "CHahce95B1g", "2VwsvrPFr9w"]
});
loadPlayer.add(".playb", {
videoId: "CHahce95B1g"
});
loadPlayer.add(".playc", {
videoId: "CHahce95B1g"
});
loadPlayer.add(".playd", {
playerVars: {
playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
}
});
loadPlayer.add(".playe", {
videoId: "CHahce95B1g"
});
console.log("hit");
// myModal.classList.remove("open");
}
const closeModal = document.querySelector(".exit");
closeModal.addEventListener("click", modalClickHandler);
}());
Code 1) Button code added to modal code: https://jsfiddle.net/04Lvrgkb/
Code 2) Button code added to modal removed code: https://jsfiddle.net/hk3zLunx/5/
Both at the same spot, where the buttons are viewable on the screen and functioning.
Trying to get Code 2 to work right now.
Maybe what gets done in Code 2, would work in Code 1 also.
The only thing not working right now that I can see in both is the exit button not taking me to the sliding panels that open the videos.
You have two errors on this fiddle.
First you don’t target exitInitial anywhere.
You have .exit here:
console.log("hit");
}
const exitButton = document.querySelector(".exit");
exitButton.addEventListener("click", exitClickHandler);
}());
It should be exitInitial:
const exitButton = document.querySelector(".exitInitial");
The other error is that you have a space after the id in the html which means it can’t be found.
<div id="myModal " class="modalA open hide">
It should be:
<div id="myModal" class="modalA open hide">
Fixing those 2 errors makes the buttons disappear and the cross curtain slide open.
Got it working: https://jsfiddle.net/tL07f6bn/1/
How do I do the other one? https://jsfiddle.net/mk9fd3ua/1/
Clicking on modal exit a scrollbar pops up, but it’s supposed to be removed.
Code that uses modal: https://jsfiddle.net/tL07f6bn/1/
Code with modal removed: https://jsfiddle.net/hxm1y47b/
Is that working now or do you have a question?
I seem to have both working now.
1 Like