Vanilla Javascript Modal not appearing once clicked - javascript

I am a beginner and tried to code along in a Javascript tutorial video(Beginner Projects). The problem is my modal did not pop-up once I clicked the button. The new class i've created (.open-modal) in vanilla javascript appeared in the dev tool elements the same as the close button once I unchecked the z-index: -10 and visibility: hidden. I also tried to click the close button but nothing happens. Thanks!
const modalOverlay = document.querySelector(".modal-overlay")
const modalClose = document.querySelector(".close-btn")
const modalBtn = document.querySelector('.btn-primary')
modalBtn.addEventListener("click", function() {
modalOverlay.classList.add("open-modal");
});
modalClose.addEventListener("click", function() {
modalOverlay.classList.remove("open-modal")
});
.open-modal {
visibility: visible;
z-index: 100;
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
place-items: center;
justify-content: center;
background: rgba(76, 52, 90, 0.15);
z-index: -10;
visibility: hidden;
}
.modal-container {
position: relative;
text-align: center;
background: #fff;
font-weight: 300;
border-radius: 10px;
padding: 10px;
height: 400px;
display: flex;
align-items: center;
}
<button class="btn btn-primary">OPEN</button>
</form>
</div>
</div>
</section>
<div class="modal-overlay">
<div class="container modal-container">
<h1>MODAL TEST!</h1>
<button class="close-btn"><i class="fas fa-times"></i></button>
</div>
</div>

You just have to write ".open-modal" after ".modal-container" or use "!important" end of your ".open-modal" styles to work well
const modalOverlay = document.querySelector(".modal-overlay")
const modalClose = document.querySelector(".close-btn")
const modalBtn = document.querySelector('.btn-primary')
modalBtn.addEventListener("click", function() {
modalOverlay.classList.add("open-modal");
});
modalClose.addEventListener("click", function() {
modalOverlay.classList.remove("open-modal")
});
.modal-overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
place-items: center;
justify-content: center;
background: rgba(76, 52, 90, 0.15);
z-index: 0;
visibility: hidden;
}
.modal-container {
position: relative;
text-align: center;
background: #fff;
font-weight: 300;
border-radius: 10px;
padding: 10px;
height: 400px;
display: flex;
align-items: center;
}
.open-modal {
visibility: visible;
z-index: 100;
}
<button class="btn btn-primary">OPEN</button>
</form>
</div>
</div>
</section>
<div class="modal-overlay">
<div class="container modal-container">
<h1>MODAL TEST!</h1>
<button class="close-btn"><i class="fas fa-times"></i></button>
</div>
</div>

Related

Modal pop-up won't pop up

I was trying to make a pop-up modal. It shows up if opacity set to 1, but it won't appear when button is clicked.
The show has opacity 1, but it won't work.
I'd appreciate any sort of help, thanks!
I'd appreciate any sort of help, thanks!
I'd appreciate any sort of help, thanks!
const donateOpen = document.getElementById('donateOpen');
const modal_container = document.getElementById('modal_container');
const donateClose = document.getElementById('donateClose');
donateOpen.addEventListener('click', () => {
console.log('clicks');
modal_container.classList.add('show');
});
donateClose.addEventListener('click', () => {
modal_container.classList.remove('show');
});
.modal-container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: rbga(0,0,0,0.3);
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
opacity: 0;
pointer-events: none;
}
.modal-container .show {
opacity: 1;
pointer-events: auto;
}
.modal {
padding: 30px 50px;
max-width: 100%;
border-radius: 5px;
width: 350px;
height: 350px;
background-color: white;
text-align: center;
}
<button id='donateOpen'>DONATE NOW</button>
<div class='modal-container' id='modal_container'>
<div class='modal'>
<h2>Donate Now</h2>
<form action="">
<input type="text" placeholder='Name' class='input' id='name'>
<input type="email" placeholder='E-Mail' class='input'>
<button class='submit' id='donateClose'>Submit</button>
</form>
</div>
</div>
You are defining the .show class as a child of the modal because you put a space between. So instead of
.modal-container .show {
opacity: 1;
pointer-events: auto;
}
it should be without the space in between like:
.modal-container.show {
opacity: 1;
pointer-events: auto;
}
Full Example:
const donateOpen = document.getElementById('donateOpen');
const modal_container = document.getElementById('modal_container');
const donateClose = document.getElementById('donateClose');
donateOpen.addEventListener('click', () => {
console.log('clicks');
modal_container.classList.add('show');
});
donateClose.addEventListener('click', () => {
modal_container.classList.remove('show');
});
.modal-container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: rbga(0,0,0,0.3);
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
opacity: 0;
pointer-events: none;
}
.modal-container.show {
opacity: 1;
pointer-events: auto;
}
.modal {
padding: 30px 50px;
max-width: 100%;
border-radius: 5px;
width: 350px;
height: 350px;
background-color: white;
text-align: center;
}
.input {
width: 80%;
display: block;
margin: 15px auto;
padding: 12px 20px;
}
.input:focus {
background-color: lightblue;
}
<button id='donateOpen'>DONATE NOW</button>
<div class='modal-container' id='modal_container'>
<div class='modal'>
<h2>Donate Now</h2>
<form action="">
<input type="text" placeholder='Name' class='input' id='name'>
<input type="email" placeholder='E-Mail' class='input'>
<input type="text" placeholder='Donation Amount' class='input'>
<button class="close" id='donateClose'>Cancel</button>
<button class='submit' id='donateClose'>Submit</button>
</form>
</div>
</div>
You have to define the .show class autonomously in the CSS file.
.show {
opacity: 1;
pointer-events: auto;
}
const donateOpen = document.getElementById('donateOpen');
const modal_container = document.getElementById('modal_container');
const donateClose = document.getElementById('donateClose');
donateOpen.addEventListener('click', () => {
donateOpen.classList.add('hide');
modal_container.classList.add('show');
});
donateClose.addEventListener('click', () => {
modal_container.classList.remove('show');
});
.modal-container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: rbga(0,0,0,0.3);
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
opacity: 0;
pointer-events: none;
}
/* You have to define the show class autonomously in the CSS file. */
.show {
opacity: 1;
pointer-events: auto;
}
.hide {
opacity: 0;
}
.modal {
padding: 30px 50px;
max-width: 100%;
border-radius: 5px;
width: 350px;
height: 350px;
background-color: white;
text-align: center;
}
.input {
width: 80%;
display: block;
margin: 15px auto;
padding: 12px 20px;
}
.input:focus {
background-color: lightblue;
}
<button id='donateOpen'>DONATE NOW</button>
<div class='modal-container' id='modal_container'>
<div class='modal'>
<h2>Donate Now</h2>
<form action="">
<input type="text" placeholder='Name' class='input' id='name'>
<input type="email" placeholder='E-Mail' class='input'>
<input type="text" placeholder='Donation Amount' class='input'>
<button class="close" id='donateClose'>Cancel</button>
<button class='submit' id='donateClose'>Submit</button>
</form>
</div>
</div>

Reset image modal to prevent previous photo being displayed

My modal has an issue where it displays the previous image just before displaying the one just clicked on. I believe that i need to reset the modal on close to prevent this from happening.
Just to clarify, the modal does not slide to the next image. It will need to be closed in order to select the next image.
I have tried resetting the HTML when the modal is closed, but it doesn't seem to work.
const modal = document.querySelector('.modal');
const previews = document.querySelectorAll('.solution-image-container img');
const original = document.querySelector('.full-img');
previews.forEach(preview => {
preview.addEventListener('click', () => {
modal.classList.add('open');
original.classList.add('open');
const originalSrc = preview.getAttribute('data-original');
original.src = originalSrc;
})
});
modal.addEventListener('click', (e) => {
if (e.target.classList.contains('modal')) {
modal.classList.remove('open');
original.classList.remove('open');
}
if (modal.style.opacity === 0) {
modal.innerHTML = "";
}
});
.content-container {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 3rem;
width: 100%;
}
.solution-image-container {
display: flex;
align-items: center;
justify-content: center;
width: 50%;
flex-direction: column;
}
.solution-image-container img {
max-width: 100%;
height: auto;
border-radius: 5px;
cursor: pointer;
}
.images-gallery {
display: flex;
align-items: center;
justify-content: center;
margin: 1rem 0;
grid-gap: 1rem;
width: 100%;
}
#gallery-img {
height: 150px;
width: 150px;
object-fit: cover;
}
.modal {
background: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 50;
opacity: 0;
pointer-events: none;
transition: 0.25s ease-out;
}
.modal.open {
opacity: 1;
pointer-events: all;
}
.full-img {
position: absolute;
height: 80%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 5px;
}
<div class="content-container">
<div class="solution-image-container">
<img class="big-img"
src="https://source.unsplash.com/random/350x350"
srcset=""
data-original="https://source.unsplash.com/random/350x350"/>
<div class="images-gallery">
<img
id="gallery-img"
src="https://source.unsplash.com/random/151x151"
alt=""
srcset=""
data-original="https://source.unsplash.com/random/151x151"
/>
<img
id="gallery-img"
src="https://source.unsplash.com/random/152x152"
alt=""
srcset=""
data-original="https://source.unsplash.com/random/152x152"
/>
<img
id="gallery-img"
src="https://source.unsplash.com/random/153x153"
alt=""
srcset=""
data-original="https://source.unsplash.com/random/153x153"
/>
</div>
</div>
</div>
<div class="modal">
<img alt="" class="full-img" />
</div>

Keep parallax fixed but change image on scroll?

I have a div where I want to change the image and text when I scroll on it. I have gotten some of the way but I cant figure out how to keep the "parallax-row" fixed, but act like its scrolling? I have a code pen link to help below.
MY GOAL : When you scroll anywhere in the parallax-window everything should stick, but the image and text changes. I have seen some cool image effects using parallax so thats why I am learning it.
codepen
<html>
<body>
<!---------PARALLAX------->
<div class="parallax-window">
<div class="parallax-container">
<div class="parallax-row">
<div class="parallax-image-container">
<img src="https://cdn.pixabay.com/photo/2016/11/18/19/07/happy-1836445_1280.jpg" alt="">
</div>
<div class="parallax-text">
<h1>Title 1</h1>
<h3>This is a description.
</h3>
<div class="mouseicon">
<div class="mousewheel"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
/*PARALLAX */
.parallax-container::-webkit-scrollbar {
display: none;
}
.parallax-window {
position: relative;
height: 400px;
width: 100vw;
overflow-y: scroll;
overflow-x: hidden;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.parallax-container {
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
height: 1000px;
background-color: rgb(221, 221, 221);
}
.parallax-row {
display: flex;
justify-content: flex-start;
align-items: center;
height: 400px;
width: 100%;
}
.parallax-image-container {
display: block;
height: inherit;
}
.parallax-image-container img {
height: inherit;
}
.parallax-text {
height: inherit;
display: flex;
flex-direction: column;
align-items: left;
justify-content: center;
padding: 0em 4em;
}
.mouseicon {
margin: 1em;
display: flex;
justify-content: center;
width: 40px;
height: 65px;
border: solid 2px black;
border-radius: 50px;
}
.mousewheel {
width: 10px;
height: 20px;
background-color: black;
border-radius: 50px;
animation: scroll 1.5s infinite;
}
#keyframes scroll {
0% {
transform: translateY(0px);
opacity: 0.5;
}
100% {
transform: translateY(5px);
}
}
JS
//-------PARALLAX SCROLL-------- //
const parallaxContainer = document.querySelector(".parallax-window");
const parallaxImage = document.querySelector(".parallax-image-container img");
parallaxContainer.scrolltop = 0;
const parallaxText = document.querySelector(".parallax-text h1")
var scrollHandler = function () {
var newImageUrl = parallaxImage.src;
var scrollTopParallax =
parallaxContainer.scrollTop || parallaxContainer.scrollTop;
if (scrollTopParallax > 100) {
newImageUrl =
"https://cdn.pixabay.com/photo/2016/11/29/07/16/balancing-1868051__480.jpg";
parallaxText.innerHTML = "Title 2"
}
if (scrollTopParallax < 100) {
newImageUrl =
"https://cdn.pixabay.com/photo/2016/11/18/19/07/happy-1836445_1280.jpg";
parallaxText.innerHTML = "Title 1"
}
parallaxImage.src = newImageUrl;
console.log("new: " + parallaxImage.src);
};
parallaxContainer.addEventListener("scroll", scrollHandler);
I have updated my codepen with my own answer. essentially creating an overlay to scroll on and then changing the elements based on that invisible overlays scroll position. see link to codepen above.

jQuery click toggle event, can't figure out how to have the first click on the div and second click anywhere EXCEPT the div?

the attached code allows you to click on a div to bring it into "focus" like a modal dialogue box, which is what I wanted it to do. However, I don't want to have to click on the div a second time to "dismiss" it, instead I want to click anywhere outside of the div.
I'm completely stumped at this point, and can't seem to find any good resources for it. Any help would be greatly appreciated!
$('[id^=TestDiv]').click(function(e) {
$('#TestDiv' + this.id.match(/\d+$/)[0]).toggleClass('fullscreen');
$('#overlay').toggle();
});
body {
height: 100vh;
width: 100vh;
}
#Container {
margin: auto;
padding: 0;
display: grid;
background-color: black;
width: 100%;
height: 100%;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"myDiv1 myDiv2"
"myDiv3 myDiv4";
}
div.fullscreen {
position: absolute;
z-index: 9999;
width: 50%;
height: 50%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#TestDiv1 {
background: red;
grid-area: myDiv1;
}
#TestDiv2 {
background: green;
grid-area: myDiv2;
}
#TestDiv3 {
background: blue;
grid-area: myDiv3;
}
#TestDiv4 {
background: yellow;
grid-area: myDiv4;
}
div[id^='TestDiv'] {
display: flex;
justify-content: flex-end;
flex-direction: column;
}
span.text {
float: left;
margin-bottom: 2%;
margin-left: 2%;
font-size: 0.5em;
}
span.integer {
float: right;
margin-bottom: 2%;
margin-right: 4%;
font-size: 0.55em;
font-weight: bold;
}
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
}
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<div id="Container">
<div id="TestDiv1" class="top">
<div>
<span class="text">text content </span>
<span class="integer">1</span>
</div>
</div>
<div id="TestDiv2" class="top">
<div>
<span class="text">text content </span>
<span class="integer">2</span>
</div>
</div>
<div id="TestDiv3" class="bottom">
<div>
<span class="text">text content </span>
<span class="integer">3</span>
</div>
</div>
<div id="TestDiv4" class="bottom">
<div>
<span class="text">text content </span>
<span class="integer">4</span>
</div>
</div>
</div>
<div id="overlay"></div>
</body>
</html>
You are using toggle class, the problem is that just use addClass, do the below code, it will work:
$('[id^=TestDiv]').click(function(e) {
$('#TestDiv' + this.id.match(/\d+$/)[0]).addClass('fullscreen');
$('#overlay').css("display","block");
});
$('#overlay').click(function () {
$('[id^=TestDiv]').removeClass('fullscreen');
$('#overlay').css("display","none");
});
$('[id^=TestDiv]').click(function(e) {
$('#TestDiv' + this.id.match(/\d+$/)[0]).addClass('fullscreen');
$('#overlay').css("display","block");
});
$('#overlay').click(function () {
$('[id^=TestDiv]').removeClass('fullscreen');
$('#overlay').css("display","none");
});
body {
height: 100vh;
width: 100vh;
}
#Container {
margin: auto;
padding: 0;
display: grid;
background-color: black;
width: 100%;
height: 100%;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"myDiv1 myDiv2"
"myDiv3 myDiv4";
}
div.fullscreen {
position: absolute;
z-index: 9999;
width: 50%;
height: 50%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#TestDiv1 {
background: red;
grid-area: myDiv1;
}
#TestDiv2 {
background: green;
grid-area: myDiv2;
}
#TestDiv3 {
background: blue;
grid-area: myDiv3;
}
#TestDiv4 {
background: yellow;
grid-area: myDiv4;
}
div[id^='TestDiv'] {
display: flex;
justify-content: flex-end;
flex-direction: column;
}
span.text {
float: left;
margin-bottom: 2%;
margin-left: 2%;
font-size: 0.5em;
}
span.integer {
float: right;
margin-bottom: 2%;
margin-right: 4%;
font-size: 0.55em;
font-weight: bold;
}
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
}
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<div id="Container">
<div id="TestDiv1" class="top">
<div>
<span class="text">text content </span>
<span class="integer">1</span>
</div>
</div>
<div id="TestDiv2" class="top">
<div>
<span class="text">text content </span>
<span class="integer">2</span>
</div>
</div>
<div id="TestDiv3" class="bottom">
<div>
<span class="text">text content </span>
<span class="integer">3</span>
</div>
</div>
<div id="TestDiv4" class="bottom">
<div>
<span class="text">text content </span>
<span class="integer">4</span>
</div>
</div>
</div>
<div id="overlay"></div>
</body>
</html>

Popup used to display on webpage, but no longer does

I did have a popup on one of my webpages that used to display when I clicked a link but, while not knowing what's changed, It appears to have stopped displaying when I click the link. When using 'Inspect Element' using Chrome, the correct elements have the attribute 'display: block !important;' so should display.
Here is the code snippet:
function popup() {
var popup = document.getElementById("popup")
var popupLayer = document.getElementById("popup-layer")
popup.classList.toggle("show")
popupLayer.classList.toggle("show")
}
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.click {
cursor: pointer;
}
.popup {
background-color: white;
height: 70%;
width: 70%;
display: none;
position: relative;
border: 1px solid;
padding: 20px;
z-index: 2;
align-self: center;
}
.popup-wrapper {
height: 100%;
width: 100%;
visibility: hidden;
display: none;
position: absolute;
display: flex;
justify-content: center;
}
.show {
display: block !important;
}
.popup-layer {
background-color: gray;
opacity: 0.3;
position: absolute;
height: 100%;
width: 100%;
margin-top: -20px;
z-index: 1;
display: none;
}
#page-1 {
background-color: #b3d9ff;
height: 100vh;
width: 100%;
}
<div id="page-1">
<div id="popup-wrapper" class="popup-wrapper">
<div id="popup" class="popup center">
<a class="click" onclick="popup()">Click me!</a>
</div>
</div>
<a class="click" onclick="popup()">Click me!</a>
<div id="popup-layer" class="popup-layer">
</div>
</div>
This is really a debugging question which is supposed to be done by you or at the least told us what you think it is.
Anyway, in .popup-wrapper I took out height as I presume it was spanning out of the view.
function popup() {
var popup = document.getElementById("popup");
var popupLayer = document.getElementById("popup-layer");
popup.classList.toggle("show");
popupLayer.classList.toggle("show");
}
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.click {
cursor: pointer;
}
.popup {
background-color: red;
height: 70%;
width: 70%;
display: none;
position: relative;
border: 1px solid;
padding: 20px;
z-index: 2;
align-self: center;
}
.popup-wrapper {
width: 100%;
display: none;
position: absolute;
display: flex;
justify-content: center;
}
.show {
display: block !important;
}
.popup-layer {
background-color: gray;
opacity: 0.3;
position: absolute;
height: 100%;
width: 100%;
margin-top: -20px;
z-index: 1;
display: none;
}
#page-1 {
background-color: #b3d9ff;
height: 100vh;
width: 100%;
}
<div id="page-1">
<div id="popup-wrapper" class="popup-wrapper">
<div id="popup" class="popup center">
<a class="click" onclick="popup()">Click me!</a>
</div>
</div>
<a class="click" onclick="popup()">Click me!</a>
<div id="popup-layer" class="popup-layer"></div>
</div>
yes thats popup-wrapper that is origin of the problem. But seing that you put your events in the a element its prefered to use this code to prevent the redirection or use button instead of this
var popupDiv = document.getElementById("popup");
var popupLayer = document.getElementById("popup-layer");
var clickMe=document.querySelectorAll(".click");
function popup() {
popupDiv.classList.toggle("show");
popupLayer.classList.toggle("show");
}
clickMe.forEach(function(elem){
elem.addEventListener('click',function(e){
e.preventDefault();
popup()},false);
});
CSS thus change this part
.popup-wrapper {
height: 50%;
width: 100%;
display: none;
position: absolute;
display: flex;
z-index: 0;
justify-content: center;
}
JS for the best way
var popupDiv = document.getElementById("popup");
var popupLayer = document.getElementById("popup-layer");
var clickMe=document.querySelectorAll(".click");
function popup() {
popupDiv.classList.toggle("show");
popupLayer.classList.toggle("show");
}
clickMe.forEach(function(elem){
elem.addEventListener('click',function(e){
e.preventDefault();
popup()},false);
});

Categories