Automatic popup [duplicate]

Automatic popup [duplicate] - javascript

This question already has answers here:
Javascript Age verification Popup
(1 answer)
How to open a CSS-only popup automatically on page load/using Javascript?
(4 answers)
Closed last year.
I am attaching this code which is a popup, opening when you click on the Open Popup button, but I need to make this PopUp automatic when the web page is opened. I don't know how to do this.
var btnAbrirPopup = document.getElementById('btn-abrir-popup'),
overlay = document.getElementById('overlay'),
popup = document.getElementById('popup'),
btnCerrarPopup = document.getElementById('btn-cerrar-popup');
btnAbrirPopup.addEventListener('click', function(){
overlay.classList.add('active');
popup.classList.add('active');
});
btnCerrarPopup.addEventListener('click', function(e){
e.preventDefault();
overlay.classList.remove('active');
popup.classList.remove('active');
});
* {
padding: 0;
margin: 0;
box-sizing:border-box;
}
body {
background: #fff;
font-family: 'Open Sans', sans-serif;
}
.contenedor {
width: 90%;
max-width: 1000px;
margin: 20px auto;
}
.contenedor article {
line-height: 28px;
}
.contenedor article h1 {
font-size: 30px;
text-align: left;
padding: 50px 0;
}
.contenedor article p {
margin-bottom: 20px;
}
.contenedor article .btn-abrir-popup {
padding: 0 20px;
margin-bottom: 20px;
height: 40px;
line-height: 40px;
border: none;
color: #fff;
background: #5E7DE3;
border-radius: 3px;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
cursor: pointer;
transition: .3s ease all;
cursor: pointer;
}
.contenedor article .btn-abrir-popup:hover {
background: rgba(94,125,227, .9);
}
/* ------------------------- */
/* POPUP */
/* ------------------------- */
.overlay {
background: rgba(0,0,0,.3);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
align-items: center;
justify-content: center;
display: flex;
visibility: hidden;
}
.overlay.active {
visibility: visible;
}
.popup {
background: #F8F8F8;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
border-radius: 3px;
font-family: 'Montserrat', sans-serif;
padding: 20px;
text-align: center;
width: 600px;
transition: .3s ease all;
transform: scale(0.7);
opacity: 0;
}
.popup .btn-cerrar-popup {
font-size: 16px;
line-height: 16px;
display: block;
text-align: right;
transition: .3s ease all;
color: #BBBBBB;
}
.popup .btn-cerrar-popup:hover {
color: #000;
}
.popup h3 {
font-size: 36px;
font-weight: 600;
margin-bottom: 10px;
opacity: 0;
}
.popup h4 {
font-size: 26px;
font-weight: 300;
margin-bottom: 40px;
opacity: 0;
}
.popup form .contenedor-inputs {
opacity: 0;
}
.popup form .contenedor-inputs input {
width: 100%;
margin-bottom: 20px;
height: 52px;
font-size: 18px;
line-height: 52px;
text-align: center;
border: 1px solid #BBBBBB;
}
.popup form .btn-submit {
padding: 0 20px;
height: 40px;
line-height: 40px;
border: none;
color: #fff;
background: #5E7DE3;
border-radius: 3px;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
cursor: pointer;
transition: .3s ease all;
}
.popup form .btn-submit:hover {
background: rgba(94,125,227, .9);
}
/* ------------------------- */
/* ANIMACIONES */
/* ------------------------- */
.popup.active { transform: scale(1); opacity: 1; }
.popup.active h3 { animation: entradaTitulo .8s ease .5s forwards; }
.popup.active h4 { animation: entradaSubtitulo .8s ease .5s forwards; }
.popup.active .contenedor-inputs { animation: entradaInputs 1s linear 1s forwards; }
#keyframes entradaTitulo {
from {
opacity: 0;
transform: translateY(-25px);
}
to {
transform: translateY(0);
opacity: 1;
}
}
#keyframes entradaSubtitulo {
from {
opacity: 0;
transform: translateY(25px);
}
to {
transform: translateY(0);
opacity: 1;
}
}
#keyframes entradaInputs {
from { opacity: 0; }
to { opacity: 1; }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600|Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
<link rel="stylesheet" href="estilos.css">
<title>Ventana Emergente Animada</title>
</head>
<body>
<button id="btn-abrir-popup" class="btn-abrir-popup">Abrir Ventana Emergente</button>
<div class="overlay" id="overlay">
<div class="popup" id="popup">
<i class="fas fa-times"></i>
<h3>SUSCRIBETE</h3>
<h4>y recibe un cupon de descuento.</h4>
<form action="">
<div class="contenedor-inputs">
<input type="text" placeholder="Nombre">
<input type="email" placeholder="Correo">
</div>
<input type="submit" class="btn-submit" value="Suscribirse">
</form>
</div>
</div>
<script src="popup.js"></script>
</body>
</html>

Use the load event over the DOMContentLoaded since we need the CSS and possibly backgrounds etc
Then just click the button
window.addEventListener("load",function() { btnAbrirPopup.click() })
var btnAbrirPopup = document.getElementById('btn-abrir-popup'),
overlay = document.getElementById('overlay'),
popup = document.getElementById('popup'),
btnCerrarPopup = document.getElementById('btn-cerrar-popup');
btnAbrirPopup.addEventListener('click', function(){
overlay.classList.add('active');
popup.classList.add('active');
});
btnCerrarPopup.addEventListener('click', function(e){
e.preventDefault();
overlay.classList.remove('active');
popup.classList.remove('active');
});
window.addEventListener("load",function() { btnAbrirPopup.click() })
* {
padding: 0;
margin: 0;
box-sizing:border-box;
}
body {
background: #fff;
font-family: 'Open Sans', sans-serif;
}
.contenedor {
width: 90%;
max-width: 1000px;
margin: 20px auto;
}
.contenedor article {
line-height: 28px;
}
.contenedor article h1 {
font-size: 30px;
text-align: left;
padding: 50px 0;
}
.contenedor article p {
margin-bottom: 20px;
}
.contenedor article .btn-abrir-popup {
padding: 0 20px;
margin-bottom: 20px;
height: 40px;
line-height: 40px;
border: none;
color: #fff;
background: #5E7DE3;
border-radius: 3px;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
cursor: pointer;
transition: .3s ease all;
cursor: pointer;
}
.contenedor article .btn-abrir-popup:hover {
background: rgba(94,125,227, .9);
}
/* ------------------------- */
/* POPUP */
/* ------------------------- */
.overlay {
background: rgba(0,0,0,.3);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
align-items: center;
justify-content: center;
display: flex;
visibility: hidden;
}
.overlay.active {
visibility: visible;
}
.popup {
background: #F8F8F8;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
border-radius: 3px;
font-family: 'Montserrat', sans-serif;
padding: 20px;
text-align: center;
width: 600px;
transition: .3s ease all;
transform: scale(0.7);
opacity: 0;
}
.popup .btn-cerrar-popup {
font-size: 16px;
line-height: 16px;
display: block;
text-align: right;
transition: .3s ease all;
color: #BBBBBB;
}
.popup .btn-cerrar-popup:hover {
color: #000;
}
.popup h3 {
font-size: 36px;
font-weight: 600;
margin-bottom: 10px;
opacity: 0;
}
.popup h4 {
font-size: 26px;
font-weight: 300;
margin-bottom: 40px;
opacity: 0;
}
.popup form .contenedor-inputs {
opacity: 0;
}
.popup form .contenedor-inputs input {
width: 100%;
margin-bottom: 20px;
height: 52px;
font-size: 18px;
line-height: 52px;
text-align: center;
border: 1px solid #BBBBBB;
}
.popup form .btn-submit {
padding: 0 20px;
height: 40px;
line-height: 40px;
border: none;
color: #fff;
background: #5E7DE3;
border-radius: 3px;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
cursor: pointer;
transition: .3s ease all;
}
.popup form .btn-submit:hover {
background: rgba(94,125,227, .9);
}
/* ------------------------- */
/* ANIMACIONES */
/* ------------------------- */
.popup.active { transform: scale(1); opacity: 1; }
.popup.active h3 { animation: entradaTitulo .8s ease .5s forwards; }
.popup.active h4 { animation: entradaSubtitulo .8s ease .5s forwards; }
.popup.active .contenedor-inputs { animation: entradaInputs 1s linear 1s forwards; }
#keyframes entradaTitulo {
from {
opacity: 0;
transform: translateY(-25px);
}
to {
transform: translateY(0);
opacity: 1;
}
}
#keyframes entradaSubtitulo {
from {
opacity: 0;
transform: translateY(25px);
}
to {
transform: translateY(0);
opacity: 1;
}
}
#keyframes entradaInputs {
from { opacity: 0; }
to { opacity: 1; }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600|Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
<link rel="stylesheet" href="estilos.css">
<title>Ventana Emergente Animada</title>
</head>
<body>
<button id="btn-abrir-popup" class="btn-abrir-popup">Abrir Ventana Emergente</button>
<div class="overlay" id="overlay">
<div class="popup" id="popup">
<i class="fas fa-times"></i>
<h3>SUSCRIBETE</h3>
<h4>y recibe un cupon de descuento.</h4>
<form action="">
<div class="contenedor-inputs">
<input type="text" placeholder="Nombre">
<input type="email" placeholder="Correo">
</div>
<input type="submit" class="btn-submit" value="Suscribirse">
</form>
</div>
</div>
<script src="popup.js"></script>
</body>
</html>

you can use load DOMContentLoaded event
this event will be fired when the dom is fully loaded.
or you can take advantage of the load event too.
see the below example.
var btnAbrirPopup = document.getElementById('btn-abrir-popup'),
overlay = document.getElementById('overlay'),
popup = document.getElementById('popup'),
btnCerrarPopup = document.getElementById('btn-cerrar-popup');
function showPopus(){
overlay.classList.add('active');
popup.classList.add('active');
}
btnAbrirPopup.addEventListener('click', function(){
showPopus();
});
btnCerrarPopup.addEventListener('click', function(e){
e.preventDefault();
overlay.classList.remove('active');
popup.classList.remove('active');
});
window.addEventListener('DOMContentLoaded', (event) => {
showPopus();
});
* {
padding: 0;
margin: 0;
box-sizing:border-box;
}
body {
background: #fff;
font-family: 'Open Sans', sans-serif;
}
.contenedor {
width: 90%;
max-width: 1000px;
margin: 20px auto;
}
.contenedor article {
line-height: 28px;
}
.contenedor article h1 {
font-size: 30px;
text-align: left;
padding: 50px 0;
}
.contenedor article p {
margin-bottom: 20px;
}
.contenedor article .btn-abrir-popup {
padding: 0 20px;
margin-bottom: 20px;
height: 40px;
line-height: 40px;
border: none;
color: #fff;
background: #5E7DE3;
border-radius: 3px;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
cursor: pointer;
transition: .3s ease all;
cursor: pointer;
}
.contenedor article .btn-abrir-popup:hover {
background: rgba(94,125,227, .9);
}
/* ------------------------- */
/* POPUP */
/* ------------------------- */
.overlay {
background: rgba(0,0,0,.3);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
align-items: center;
justify-content: center;
display: flex;
visibility: hidden;
}
.overlay.active {
visibility: visible;
}
.popup {
background: #F8F8F8;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
border-radius: 3px;
font-family: 'Montserrat', sans-serif;
padding: 20px;
text-align: center;
width: 600px;
transition: .3s ease all;
transform: scale(0.7);
opacity: 0;
}
.popup .btn-cerrar-popup {
font-size: 16px;
line-height: 16px;
display: block;
text-align: right;
transition: .3s ease all;
color: #BBBBBB;
}
.popup .btn-cerrar-popup:hover {
color: #000;
}
.popup h3 {
font-size: 36px;
font-weight: 600;
margin-bottom: 10px;
opacity: 0;
}
.popup h4 {
font-size: 26px;
font-weight: 300;
margin-bottom: 40px;
opacity: 0;
}
.popup form .contenedor-inputs {
opacity: 0;
}
.popup form .contenedor-inputs input {
width: 100%;
margin-bottom: 20px;
height: 52px;
font-size: 18px;
line-height: 52px;
text-align: center;
border: 1px solid #BBBBBB;
}
.popup form .btn-submit {
padding: 0 20px;
height: 40px;
line-height: 40px;
border: none;
color: #fff;
background: #5E7DE3;
border-radius: 3px;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
cursor: pointer;
transition: .3s ease all;
}
.popup form .btn-submit:hover {
background: rgba(94,125,227, .9);
}
/* ------------------------- */
/* ANIMACIONES */
/* ------------------------- */
.popup.active { transform: scale(1); opacity: 1; }
.popup.active h3 { animation: entradaTitulo .8s ease .5s forwards; }
.popup.active h4 { animation: entradaSubtitulo .8s ease .5s forwards; }
.popup.active .contenedor-inputs { animation: entradaInputs 1s linear 1s forwards; }
#keyframes entradaTitulo {
from {
opacity: 0;
transform: translateY(-25px);
}
to {
transform: translateY(0);
opacity: 1;
}
}
#keyframes entradaSubtitulo {
from {
opacity: 0;
transform: translateY(25px);
}
to {
transform: translateY(0);
opacity: 1;
}
}
#keyframes entradaInputs {
from { opacity: 0; }
to { opacity: 1; }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600|Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
<link rel="stylesheet" href="estilos.css">
<title>Ventana Emergente Animada</title>
</head>
<body>
<button id="btn-abrir-popup" class="btn-abrir-popup">Abrir Ventana Emergente</button>
<div class="overlay" id="overlay">
<div class="popup" id="popup">
<i class="fas fa-times"></i>
<h3>SUSCRIBETE</h3>
<h4>y recibe un cupon de descuento.</h4>
<form action="">
<div class="contenedor-inputs">
<input type="text" placeholder="Nombre">
<input type="email" placeholder="Correo">
</div>
<input type="submit" class="btn-submit" value="Suscribirse">
</form>
</div>
</div>
<script src="popup.js"></script>
</body>
</html>

any code in js without when button click will run first when screen loads,so remove when button clicked detector
var btnAbrirPopup = document.getElementById('btn-abrir-popup'),
overlay = document.getElementById('overlay'),
popup = document.getElementById('popup'),
btnCerrarPopup = document.getElementById('btn-cerrar-popup');
/*btnAbrirPopup.addEventListener('click', function(){*/
/*We have removed this click function and commented*/
overlay.classList.add('active');
popup.classList.add('active');
/*});*/
btnCerrarPopup.addEventListener('click', function(e){
e.preventDefault();
overlay.classList.remove('active');
popup.classList.remove('active');
});
* {
padding: 0;
margin: 0;
box-sizing:border-box;
}
body {
background: #fff;
font-family: 'Open Sans', sans-serif;
}
.contenedor {
width: 90%;
max-width: 1000px;
margin: 20px auto;
}
.contenedor article {
line-height: 28px;
}
.contenedor article h1 {
font-size: 30px;
text-align: left;
padding: 50px 0;
}
.contenedor article p {
margin-bottom: 20px;
}
.contenedor article .btn-abrir-popup {
padding: 0 20px;
margin-bottom: 20px;
height: 40px;
line-height: 40px;
border: none;
color: #fff;
background: #5E7DE3;
border-radius: 3px;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
cursor: pointer;
transition: .3s ease all;
cursor: pointer;
}
.contenedor article .btn-abrir-popup:hover {
background: rgba(94,125,227, .9);
}
/* ------------------------- */
/* POPUP */
/* ------------------------- */
.overlay {
background: rgba(0,0,0,.3);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
align-items: center;
justify-content: center;
display: flex;
visibility: hidden;
}
.overlay.active {
visibility: visible;
}
.popup {
background: #F8F8F8;
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
border-radius: 3px;
font-family: 'Montserrat', sans-serif;
padding: 20px;
text-align: center;
width: 600px;
transition: .3s ease all;
transform: scale(0.7);
opacity: 0;
}
.popup .btn-cerrar-popup {
font-size: 16px;
line-height: 16px;
display: block;
text-align: right;
transition: .3s ease all;
color: #BBBBBB;
}
.popup .btn-cerrar-popup:hover {
color: #000;
}
.popup h3 {
font-size: 36px;
font-weight: 600;
margin-bottom: 10px;
opacity: 0;
}
.popup h4 {
font-size: 26px;
font-weight: 300;
margin-bottom: 40px;
opacity: 0;
}
.popup form .contenedor-inputs {
opacity: 0;
}
.popup form .contenedor-inputs input {
width: 100%;
margin-bottom: 20px;
height: 52px;
font-size: 18px;
line-height: 52px;
text-align: center;
border: 1px solid #BBBBBB;
}
.popup form .btn-submit {
padding: 0 20px;
height: 40px;
line-height: 40px;
border: none;
color: #fff;
background: #5E7DE3;
border-radius: 3px;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
cursor: pointer;
transition: .3s ease all;
}
.popup form .btn-submit:hover {
background: rgba(94,125,227, .9);
}
/* ------------------------- */
/* ANIMACIONES */
/* ------------------------- */
.popup.active { transform: scale(1); opacity: 1; }
.popup.active h3 { animation: entradaTitulo .8s ease .5s forwards; }
.popup.active h4 { animation: entradaSubtitulo .8s ease .5s forwards; }
.popup.active .contenedor-inputs { animation: entradaInputs 1s linear 1s forwards; }
#keyframes entradaTitulo {
from {
opacity: 0;
transform: translateY(-25px);
}
to {
transform: translateY(0);
opacity: 1;
}
}
#keyframes entradaSubtitulo {
from {
opacity: 0;
transform: translateY(25px);
}
to {
transform: translateY(0);
opacity: 1;
}
}
#keyframes entradaInputs {
from { opacity: 0; }
to { opacity: 1; }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600|Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
<link rel="stylesheet" href="estilos.css">
<title>Ventana Emergente Animada</title>
</head>
<body>
<button id="btn-abrir-popup" class="btn-abrir-popup">Abrir Ventana Emergente</button>
<div class="overlay" id="overlay">
<div class="popup" id="popup">
<i class="fas fa-times"></i>
<h3>SUSCRIBETE</h3>
<h4>y recibe un cupon de descuento.</h4>
<form action="">
<div class="contenedor-inputs">
<input type="text" placeholder="Nombre">
<input type="email" placeholder="Correo">
</div>
<input type="submit" class="btn-submit" value="Suscribirse">
</form>
</div>
</div>
<script src="popup.js"></script>
</body>
</html>

Related

Hide mobile menu when clicking on a link

I'd like to hide my mobile menu when an anchor link is clicked.
I found this
$(function () {
$('#menu-main li>a').on('click', function (e) {
$( "#menu-toggle" ).click();
});
});
solution which looked promising but I couldn't quite get it to work (I probably did something wrong)
I also tried implementing this solution
function onLinkClick() {
var coll = document.getElementsByClassName("hamburger");
coll.classList.remove("active");
}
but probably did something wrong here as well
My code:
let burger = document.getElementById('burger'),
nav = document.getElementById('main-nav'),
slowmo = document.getElementById('slowmo');
burger.addEventListener('click', function(e){
this.classList.toggle('is-open');
nav.classList.toggle('is-open');
});
html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
font-family: helvetica;
}
body {
height: 2000px;
}
#wrap {
scroll-margin-top: 130px;
}
button {
cursor: pointer;
}
.main-nav {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
text-align: center;
background: rgba (0,0,0,0);
opacity: 0;
z-index: -1;
visibility: hidden;
transition: all .375s;
}
.main-nav.is-open {
opacity: 1;
z-index: 1100;
visibility: visible;
}
/* Yellow band effect */
.main-nav::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -15px;
background: #fff;
transform-origin: 0 0;
transform: skew(-14deg) translateX(-120%);
transition: all .275s .1s;
}
.main-nav.is-open::before {
transform: skew(-14deg) translateX(0);
}
/* Skewing effect on menu links */
.main-nav ul {
display: inline-flex;
flex-direction: column;
height: 93%; /* Should be 100%, but we have a notice message :D */
align-items: flex-end;
justify-content: center;
transform: translateX(-18%) skew(-16deg);
}
.main-nav li {
display: block;
margin: .5rem 0;
text-align: right;
transform: skew(16deg);
}
/* Apparition effect on links */
.main-nav button {
opacity: 0;
transform: translateY(-10px);
}
.main-nav.is-open button {
opacity: 1;
transform: translateY(0);
}
.main-nav li:nth-child(1) a {
transition: all 275ms 175ms
}
.main-nav li:nth-child(2) a {
transition: all 275ms 225ms
}
.main-nav li:nth-child(3) a {
transition: all 275ms 275ms
}
.main-nav li:nth-child(4) a {
transition: all 275ms 325ms
}
.main-nav li:nth-child(5) a {
transition: all 275ms 375ms
}
/* Decoration */
.main-nav ul,
.main-nav li {
list-style: none;
padding: 0;
}
.main-nav button {
display: block;
padding: 12px 0;
color: #5A3B5D;
font-size: 1.4em;
text-decoration: none;
font-weight: bold;
}
/* Burger Style: #see: https://codepen.io/CreativeJuiz/full/oMZNXy */
.open-main-nav {
position: absolute;
top: 15px;
padding-top: 20px;
right: 15px;
z-index: 1200;
background: none;
border: 0;
cursor: pointer;
}
.open-main-nav:focus {
outline: none;
}
#burger {
position: fixed;
float: right;
visibility: hidden;
}
.burger {
position: relative;
display: block;
width: 28px;
height: 4px;
margin: 0 auto;
background: #fff;
transform: skew(5deg);
transition: all .275s;
margin-top: 1vw;
}
.burger:after,
.burger:before {
content: '';
display: block;
height: 100%;
background: #fff;
transition: all .275s;
}
#burger.shrink .burger {
background: #000 !important;
margin-top: 0.7vw;
}
#burger.shrink .burger:after {
background: #000 !important;
}
#burger.shrink .burger:before {
background: #000 !important;
}
.burger:after {
transform: translateY(-12px) translateX(-2px) skew(-20deg);
}
.burger:before {
transform: translateY(-16px) skew(-10deg);
}
/* Toggle State part */
.is-open .burger {
transform: skew(5deg) translateY(-8px) rotate(-45deg);
}
.is-open .burger:before {
transform: translateY(0px) skew(-10deg) rotate(75deg);
}
.is-open .burger:after {
transform: translateY(-12px) translateX(10px) skew(-20deg);
opacity: 0;
}
.is-open .burger, .is-open .burger:after, .is-open .burger:before {
background: #000;
}
/* MENU Text part */
.burger-text {
display: block;
font-size: .675rem;
letter-spacing: .05em;
margin-top: .5em;
text-transform: uppercase;
font-weight: 500;
text-align: center;
color: #fff;
}
#burger.shrink .burger-text {
color: #000;
}
.is-open .burger-text {
color: #000;
}
.container {
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
overflow: hidden;
}
/* Notice */
.notice {
position: absolute;
bottom: -15px;
left: 0; right: 0;
padding: 20px;
background: #F2F2F2;
color: #5A3B5D;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
z-index: 100;
text-align: center;
}
.notice strong {
font-weight: 700;
}
.notice button {
padding: 2px 3px;
background: #FEDC2A;
text-decoration: none;
}
h1 {
text-align: center;
font-size: 8vw;
top: 0.5em;
position: relative;
}
h2 {
text-align: center;
font-weight: 300;
margin-top: 3em;
font-size: 1rem;
}
ul {
list-style: none;
text-align: center;
}
ul li {
display: inline-table;
margin-left: -1.5em;
padding-left: -1.5em;
}
#wrap {
scroll-margin-top: 80px;
}
#burger {
visibility: visible;
}
.navb {
position: relative;
top: 50px;
color: #87CEEB !important;
font-size: 0.6rem;
visibility: hidden;
}
.navb:hover {
color: #fff !important;
}
#navbar {
text-align: center;
width: 100%;
color: white;
z-index: 999;
transition: 0.3s;
line-height: 18px;
}
#navwrapper {
background: linear-gradient(250deg, #0061ff, #60efff);
background-size: 400% 400%;
-webkit-animation: AnimationName 10s ease infinite;
-moz-animation: AnimationName 10s ease infinite;
animation: AnimationName 10s ease infinite;
height: 100vh;
}
#-webkit-keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
#-moz-keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
#keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
.selectSection {
grid-template-columns: repeat(3, 1fr);
justify-content: center;
text-align: center;
}
.selectSection button {
color: #000;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.15em;
background-color: rgba(0, 0, 0, 0) !important;
display: inline-block;
padding: 15px 20px;
position: relative;
border: none;
border-bottom: 1px;
outline: none;
}
.activenav {
color: black !important;
}
.mobilecontainer {
visibility: visible !important;
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="assets/styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<script src="assets/script.js" type="text/javascript"></script>-->
</head>
<!-- begin snippet: js hide: false -->
<body>
<nav id="navwrapper">
<button id="burger" class="open-main-nav">
<span class="burger"></span>
<span class="burger-text">Menu</span>
</button>
<div class="mobilecontainer navbar navbar-dark bg-primary navbar-fixed-top selectSection">
<div class="main-nav" id="main-nav">
<ul>
<li class="nav-item"><button onclick="location.href='#wrap'" class="activenav mobilenavb">content1</button></li>
</ul>
</div>
</div>
</nav>
<div id="wrap" class="contentSection wrapper">
<div>
<h1>content1</h1>
<h2>lorem ipsum</h2>
</div>
Note that I'm just a beginner and haven't played much around in JS so it's very easy for me to overlook something or just simply doing it wrong.

Based on your code, you've added Jquery library. Simply adding click listener for every nav-item class.
For example:
$(".nav-item").click(function(){
burger.click();
})
let burger = document.getElementById('burger'),
nav = document.getElementById('main-nav'),
slowmo = document.getElementById('slowmo');
burger.addEventListener('click', function(e){
this.classList.toggle('is-open');
nav.classList.toggle('is-open');
});
$(".nav-item").click(function(){
burger.click();
})
html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
font-family: helvetica;
}
body {
height: 2000px;
}
#wrap {
scroll-margin-top: 130px;
}
button {
cursor: pointer;
}
.main-nav {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
text-align: center;
background: rgba (0,0,0,0);
opacity: 0;
z-index: -1;
visibility: hidden;
transition: all .375s;
}
.main-nav.is-open {
opacity: 1;
z-index: 1100;
visibility: visible;
}
/* Yellow band effect */
.main-nav::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -15px;
background: #fff;
transform-origin: 0 0;
transform: skew(-14deg) translateX(-120%);
transition: all .275s .1s;
}
.main-nav.is-open::before {
transform: skew(-14deg) translateX(0);
}
/* Skewing effect on menu links */
.main-nav ul {
display: inline-flex;
flex-direction: column;
height: 93%; /* Should be 100%, but we have a notice message :D */
align-items: flex-end;
justify-content: center;
transform: translateX(-18%) skew(-16deg);
}
.main-nav li {
display: block;
margin: .5rem 0;
text-align: right;
transform: skew(16deg);
}
/* Apparition effect on links */
.main-nav button {
opacity: 0;
transform: translateY(-10px);
}
.main-nav.is-open button {
opacity: 1;
transform: translateY(0);
}
.main-nav li:nth-child(1) a {
transition: all 275ms 175ms
}
.main-nav li:nth-child(2) a {
transition: all 275ms 225ms
}
.main-nav li:nth-child(3) a {
transition: all 275ms 275ms
}
.main-nav li:nth-child(4) a {
transition: all 275ms 325ms
}
.main-nav li:nth-child(5) a {
transition: all 275ms 375ms
}
/* Decoration */
.main-nav ul,
.main-nav li {
list-style: none;
padding: 0;
}
.main-nav button {
display: block;
padding: 12px 0;
color: #5A3B5D;
font-size: 1.4em;
text-decoration: none;
font-weight: bold;
}
/* Burger Style: #see: https://codepen.io/CreativeJuiz/full/oMZNXy */
.open-main-nav {
position: absolute;
top: 15px;
padding-top: 20px;
right: 15px;
z-index: 1200;
background: none;
border: 0;
cursor: pointer;
}
.open-main-nav:focus {
outline: none;
}
#burger {
position: fixed;
float: right;
visibility: hidden;
}
.burger {
position: relative;
display: block;
width: 28px;
height: 4px;
margin: 0 auto;
background: #fff;
transform: skew(5deg);
transition: all .275s;
margin-top: 1vw;
}
.burger:after,
.burger:before {
content: '';
display: block;
height: 100%;
background: #fff;
transition: all .275s;
}
#burger.shrink .burger {
background: #000 !important;
margin-top: 0.7vw;
}
#burger.shrink .burger:after {
background: #000 !important;
}
#burger.shrink .burger:before {
background: #000 !important;
}
.burger:after {
transform: translateY(-12px) translateX(-2px) skew(-20deg);
}
.burger:before {
transform: translateY(-16px) skew(-10deg);
}
/* Toggle State part */
.is-open .burger {
transform: skew(5deg) translateY(-8px) rotate(-45deg);
}
.is-open .burger:before {
transform: translateY(0px) skew(-10deg) rotate(75deg);
}
.is-open .burger:after {
transform: translateY(-12px) translateX(10px) skew(-20deg);
opacity: 0;
}
.is-open .burger, .is-open .burger:after, .is-open .burger:before {
background: #000;
}
/* MENU Text part */
.burger-text {
display: block;
font-size: .675rem;
letter-spacing: .05em;
margin-top: .5em;
text-transform: uppercase;
font-weight: 500;
text-align: center;
color: #fff;
}
#burger.shrink .burger-text {
color: #000;
}
.is-open .burger-text {
color: #000;
}
.container {
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
overflow: hidden;
}
/* Notice */
.notice {
position: absolute;
bottom: -15px;
left: 0; right: 0;
padding: 20px;
background: #F2F2F2;
color: #5A3B5D;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
z-index: 100;
text-align: center;
}
.notice strong {
font-weight: 700;
}
.notice button {
padding: 2px 3px;
background: #FEDC2A;
text-decoration: none;
}
h1 {
text-align: center;
font-size: 8vw;
top: 0.5em;
position: relative;
}
h2 {
text-align: center;
font-weight: 300;
margin-top: 3em;
font-size: 1rem;
}
ul {
list-style: none;
text-align: center;
}
ul li {
display: inline-table;
margin-left: -1.5em;
padding-left: -1.5em;
}
#wrap {
scroll-margin-top: 80px;
}
#burger {
visibility: visible;
}
.navb {
position: relative;
top: 50px;
color: #87CEEB !important;
font-size: 0.6rem;
visibility: hidden;
}
.navb:hover {
color: #fff !important;
}
#navbar {
text-align: center;
width: 100%;
color: white;
z-index: 999;
transition: 0.3s;
line-height: 18px;
}
#navwrapper {
background: linear-gradient(250deg, #0061ff, #60efff);
background-size: 400% 400%;
-webkit-animation: AnimationName 10s ease infinite;
-moz-animation: AnimationName 10s ease infinite;
animation: AnimationName 10s ease infinite;
height: 100vh;
}
#-webkit-keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
#-moz-keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
#keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
.selectSection {
grid-template-columns: repeat(3, 1fr);
justify-content: center;
text-align: center;
}
.selectSection button {
color: #000;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.15em;
background-color: rgba(0, 0, 0, 0) !important;
display: inline-block;
padding: 15px 20px;
position: relative;
border: none;
border-bottom: 1px;
outline: none;
}
.activenav {
color: black !important;
}
.mobilecontainer {
visibility: visible !important;
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="assets/styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<script src="assets/script.js" type="text/javascript"></script>-->
</head>
<!-- begin snippet: js hide: false -->
<body>
<nav id="navwrapper">
<button id="burger" class="open-main-nav">
<span class="burger"></span>
<span class="burger-text">Menu</span>
</button>
<div class="mobilecontainer navbar navbar-dark bg-primary navbar-fixed-top selectSection">
<div class="main-nav" id="main-nav">
<ul>
<li class="nav-item"><button onclick="location.href='#wrap'" class="activenav mobilenavb">content1</button></li>
</ul>
</div>
</div>
</nav>
<div id="wrap" class="contentSection wrapper">
<div>
<h1>content1</h1>
<h2>lorem ipsum</h2>
</div>

Cannot click buttons in modal

I have a modal created with the following CSS. But when I open it up, it appears and allows me to fill out the form fields but clicking on the buttons (they have onclick events) does absolutely nothing - I tried making the buttons simple links which open new pages, but they don't do tat either. I am doing this within a SquareSpace page. I hope that doesn't complicate things.
<style>
.info-modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: visible;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.info-modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 1rem 1.5rem;
width: 400px;
border-radius: 0.5rem;
}
.info-continue-button {
background-color: #0069d9;
border-color: #0062cc;
position: relative;
width: 100px;
font-family: "Oxygen", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
}
.info-continue-button:hover {
color: #fff;
}
.info-show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
.info-field {
color: inherit;
font: inherit;
margin: 0;
line-height: normal;
margin-bottom: 15px;
background-color: #fff;
border-radius: 0;
-webkit-appearance: none;
box-shadow: none;
box-sizing: border-box;
transition: all 0.3s ease-in-out;
width: 100%;
max-width: 400px;
height: 32px;
border: 0;
border-bottom: 2px solid #d1d1d1;
padding: 8px 0;
border-bottom-color: #2d56bb;
}
.info-modal button {
font: inherit;
margin: 0;
overflow: visible;
-webkit-appearance: button;
font-family: "Adamina", Georgia, serif;
display: inline-block;
height: 40px;
text-align: center;
font-size: 12px;
line-height: 38px;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
box-sizing: border-box;
transition: all 0.3s ease-in-out;
margin-bottom: 10px;
color:#000;
outline: 0;
padding: 0 30px !important;
background-color: #e0e0e0;
border: 0;
font-weight: 700;
}
.info-modal button:hover {
color: #01855e;
}
.info-modal button[type='submit'].-disabled {
pointer-events: none;
cursor: not-allowed;
opacity: 0.4;
}
.info-modal p {
margin-bottom:0px;
}
</style>

How to set underline on hover on navigation links on responsive menu?

I have coded for underline on hover on the navigation menu, which works well. But when I create a responsive navigation menu, the underline on hover covers the entire width of the block rather than the navigation link, as it does when the browser is greater than 600px.
Here's the site, or you can refer to the below snippet.
Any help is appreciated.
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
#font-face {
font-family: "Lyon";
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf");
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("woff"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("opentype"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("svg");
}
body {
padding: 0;
margin: 0;
background: white;
}
* {
box-sizing: border-box;
}
h1 {
font-family: 'Lyon';
font-size: 24px;
max-width: 800px;
text-align: center;
margin: auto;
padding-top: 16px;
padding-left: 16px;
padding-right: 16px;
}
.navbar {
z-index: 1;
font-family: 'Lyon';
background-color: white;
position: fixed;
bottom: 0;
width: 100%;
border-top: .05rem solid;
display: flex;
justify-content: space-between;
padding: 14px 16px;
}
.navbar a {
color: black;
font-family: 'Lyon';
font-size: 24px;
text-align: center;
text-decoration: none;
position: relative;
}
.navbar a:hover {
color: black;
font-family: 'Lyon';
text-decoration: none;
}
.navbar a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.navbar a.active {
background-color: white;
color: black;
font-style: none;
font-family: 'Lyon';
}
.navbar .icon {
display: none;
}
#media screen and (max-width: 600px) {
.navbar a {
display: none;
padding-top: 6px;
}
.navbar a.icon {
float: right;
display: block;
}
.navbar.responsive .icon {
position: absolute;
left: 10px;
top: 8px;
}
.navbar.responsive a {
float;
none;
display: block;
text-align: center;
}
.navbar.responsive {
display: block;
}
.navbar.responsive a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar.responsive a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
p {
margin: 10px 0;
}
<div class="navbar" id="myNavbar">
About
Lindsay
Branding
Photography
Instagram
i
</div>

I was checking your CSS and the problem is that a tag has the property of display:block which expand the tag, so, the styles applies to the tag itself, no in the text, so, if you want to preserve the space when the display is smaller, you should wrap each a tag in a list item or in a div, and pass it the property of display:block
this is the example using that I said
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
#font-face {
font-family: "Lyon";
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf");
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("woff"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("opentype"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("svg");
}
body {
padding: 0;
margin: 0;
background: white;
}
* {
box-sizing: border-box;
}
h1 {
font-family: 'Lyon';
font-size: 24px;
max-width: 800px;
text-align: center;
margin: auto;
padding-top: 16px;
padding-left: 16px;
padding-right: 16px;
}
.navbar {
z-index: 1;
font-family: 'Lyon';
background-color: white;
position: fixed;
bottom: 0;
width: 100%;
border-top: .05rem solid;
display: flex;
justify-content: space-between;
padding: 14px 16px;
margin: 0;
}
.navbar a {
color: black;
font-family: 'Lyon';
font-size: 24px;
text-align: center;
text-decoration: none;
position: relative;
}
.navbar a:hover {
color: black;
font-family: 'Lyon';
text-decoration: none;
}
.navbar li{
list-style:none;
}
.navbar a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.navbar a.active {
background-color: white;
color: black;
font-style: none;
font-family: 'Lyon';
}
.navbar .icon {
display: none;
}
#media screen and (max-width: 600px) {
.navbar a{
display: none;
padding-top: 6px;
}
.navbar .icon {
float: right;
display: block;
}
.navbar.responsive .icon {
position: absolute;
left: 10px;
top: 8px;
}
.navbar.responsive li a {
float;
none;
display: inline;
text-align: center;
margin: 4px;
}
.navbar.responsive li {
float;
none;
text-align: center;
margin: 6px 00px;
}
.navbar.responsive {
align-content: center;
flex-flow:column;
}
.navbar.responsive li a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar.responsive li a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
<ul class="navbar" id="myNavbar">
i
<li>About</li>
<li>Lindsay</li>
<li>Branding</li>
<li>Photography</li>
<li>Instagram</li>
</ul>

Are you expecting like this
Temporary Solution
I have just added nth-child and given scaling for each link.
function myFunction() {
var x = document.getElementById("myNavbar");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
#font-face {
font-family: "Lyon";
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf");
src: url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("woff"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("opentype"), url("http://staging1.oakpark.co/wp-content/uploads/2019/07/Lyon-Text-Regular.otf") format("svg");
}
body {
padding: 0;
margin: 0;
background: white;
}
* {
box-sizing: border-box;
}
h1 {
font-family: 'Lyon';
font-size: 24px;
max-width: 800px;
text-align: center;
margin: auto;
padding-top: 16px;
padding-left: 16px;
padding-right: 16px;
}
.navbar {
z-index: 1;
font-family: 'Lyon';
background-color: white;
position: fixed;
bottom: 0;
width: 100%;
border-top: .05rem solid;
display: flex;
justify-content: space-between;
padding: 14px 16px;
}
.navbar a {
color: black;
font-family: 'Lyon';
font-size: 24px;
text-align: center;
text-decoration: none;
position: relative;
}
.navbar a:hover {
color: black;
font-family: 'Lyon';
text-decoration: none;
}
.navbar a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.navbar a.active {
background-color: white;
color: black;
font-style: none;
font-family: 'Lyon';
}
.navbar .icon {
display: none;
}
#media screen and (max-width: 600px) {
.navbar a {
display: none;
padding-top: 6px;
}
.navbar a.icon {
float: right;
display: block;
}
.navbar.responsive .icon {
position: absolute;
left: 10px;
top: 8px;
}
.navbar.responsive a {
float;
none;
display: block;
text-align: center;
}
.navbar.responsive {
display: block;
}
.navbar.responsive a:before {
content: "";
position: absolute;
height: 2px;
width:100%;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.navbar.responsive a:hover:nth-child(1):before {
visibility: visible;
-webkit-transform: scaleX(.18);
transform: scaleX(.18);
}
.navbar.responsive a:hover:nth-child(2):before {
visibility: visible;
-webkit-transform: scaleX(.22);
transform: scaleX(.22);
}
.navbar.responsive a:hover:nth-child(3):before {
visibility: visible;
-webkit-transform: scaleX(.25);
transform: scaleX(.25);
}
.navbar.responsive a:hover:nth-child(4):before {
visibility: visible;
-webkit-transform: scaleX(.33);
transform: scaleX(.33);
}
.navbar.responsive a:hover:nth-child(5):before {
visibility: visible;
-webkit-transform: scaleX(.26);
transform: scaleX(.26);
}
}
p {
margin: 10px 0;
}
<div class="navbar" id="myNavbar">
About
Lindsay
Branding
Photography
Instagram
i
</div>

Js var, not defined [duplicate]

This question already has an answer here:
jQuery TypeError: $ is undefined
(1 answer)
Closed 5 years ago.
Hi guys for some reason this variable wont work on my file. I have a picture, and when the user hovers over it, its suppose to bring up a swipe box with some information about the pic. However the box wont appear for some reason.
HTML/JS:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href="css/custom.css" rel="stylesheet">
<script type="text/javascript">
var modal = $('.modal');
modal.hover(function() {
$(this).toggleClass('open');
});
alsolike(
"qEybdR", "Checkbox Radial Wash",
"dPdoNp", "Google Messenger Icon Button",
"BJAjF", "Masonry Multi Column Grid"
);
</script>
</head>
<body>
<a class="drib" href="http://drbl.in/okRS">View it on Dribbble <i class="fa fa-dribbble"></i></a>
<div class="modal">
<div class="image-container"></div>
<div class="content">
<div class="wrapper">
<div class="category">First Drive Review</div>
<h2>2015 Dodge Challenger SRT Hellcat</h2>
<h4>Andy Wendler <span>from</span> July 2014</h4>
<div class="line"></div>
<p>Make room, Beelzebub, there’s a new demon-prince pony car in town, and it’s from the people who once brought you a real Demon. Known in this mortal realm as the Dodge Challenger SRT Hellcat...</p>Read More <i class="fa fa-caret-right"></i>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS:
.modal {
width: 600px;
height: 400px;
margin: 50px auto;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
position: relative;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.modal .image-container {
background: url("http://media.caranddriver.com/images/14q3/612022/2015-dodge-challenger-srt-hellcat-first-drive-review-car-and-driver-photo-615298-s-original.jpg");
background-size: cover;
background-position: center center;
display: inline-block;
width: 100%;
height: 100%;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.modal .content {
width: 40%;
height: 100%;
position: absolute;
right: -40%;
top: 0;
background: white;
box-shadow: -10px 0 25px rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.modal .wrapper {
width: 100%;
height: 100%;
position: relative;
padding: 24px;
}
.modal .wrapper h2 {
font-family: "Georgia", serif;
font-style: italic;
font-weight: bold;
font-size: 26px;
line-height: 32px;
margin: 8px 0 10px 20px;
opacity: 0;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.modal .wrapper h4 {
text-transform: uppercase;
color: #999;
font-size: 12px;
position: relative;
top: 4px;
opacity: 0;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.modal .wrapper h4 span {
text-transform: none;
font-style: italic;
font-family: "Georgia", serif;
}
.modal .wrapper .category {
background: #333;
padding: 7px 15px;
display: inline-block;
color: white;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 1px;
font-weight: 500;
position: absolute;
top: -24px;
left: 20px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.modal .wrapper .line {
width: 50px;
height: 2px;
opacity: 0;
background: #E3000C;
margin: 16px 0 14px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.modal .wrapper p {
font-size: 14px;
line-height: 24px;
opacity: 0;
-webkit-transition: all 0.2s;
transition: all 0.2s;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.modal .wrapper p span {
text-transform: uppercase;
font-size: 0.75em;
font-weight: 500;
letter-spacing: 0.5px;
}
.modal .wrapper a {
display: block;
text-align: right;
text-decoration: none;
font-style: italic;
font-size: 12px;
color: #999;
font-family: "Georgia", serif;
margin-top: 12px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
opacity: 0;
}
.modal .wrapper a i.fa {
-webkit-transition: all 0.2s;
transition: all 0.2s;
margin-left: 2px;
color: #E3000C;
}
.modal .wrapper a:hover {
color: #E3000C;
}
.modal .wrapper a:hover i.fa {
margin-left: 12px;
}
.modal.open .image-container {
width: 60%;
}
.modal.open .content {
right: 0;
}
.modal.open .content .category {
top: 0;
}
.modal.open .content h2 {
opacity: 1;
margin-left: 0;
}
.modal.open .content h4 {
top: 0;
opacity: 1;
}
.modal.open .content .line {
width: 90px;
opacity: 1;
}
.modal.open .content p {
opacity: 1;
}
.modal.open .content a {
opacity: 1;
}
.trigger {
position: absolute;
top: 24px;
right: 24px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
color: #333;
}
* {
box-sizing: border-box;
}
.drib {
text-align: center;
display: block;
margin-top: 20px;
color: #fff;
}
.drib .fa {
color: #ea4c89;
}
body {
background: #777;
font-family: "Lato", sans-serif;
}
Thanks for the help

You can't use jquery until you have included jquery, ie:
<script type="text/javascript">
var modal = $('.modal');
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
must be:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
var modal = $('.modal');
</script>
there's still some debate as to the best place to put these (in the <head> (so available to the page) or just before </body> (so the content loads quicker)) as long as they are in the correct order.

My Pop Up Window isn't displaying right

I'm redesigning a website for fun. I have a pop up window that opens up after you click a button. However, the window and button shows up in a weird layout. The button is displayed to the far left and the text is all over the screen. You can actually see the entire code on codepen: http://codepen.io/sibraza/pen/wWgqBO
Here is the HTML:
<!--- This is what the user see when they click the button -->
<span class="msg"><button class="btn btn-danger"data-js="open">Subscribe to our Newsletter</button></span>
</section>
<!-- this is what the user sees when the popup is displayed -->
<div class="popup">
<h2>Subscribe to the Newletter:</h2>
<button name="close">Close Pop-up</button>
</div>
Here is the CSS:
button {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
background: lightcoral;
border: 0;
border-radius: 4px;
padding: 7px 15px;
font-size: 16px;
color: #FFFFFF;
cursor: pointer;
}
button:focus {
outline: none;
}
button:hover {
background: #f39797;
}
.popup {
background: rgba(255, 255, 255, 0.8);
position: fixed;
display: none;
z-index: 5000;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.popup > div {
border-radius: 4px;
position: fixed;
background: #FFFFFF;
box-shadow: 0px 0px 12px #666666;
padding: 30px 15px;
/* Width of popup can be changed */
width: 80%;
max-width: 600px;
z-index: 5001;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
text-align: center;
}
Here is the JavaScript:
function popupOpenClose(popup) {
/* Add div inside popup for layout if one doesn't exist */
if ($(".wrapper").length == 0){
$(popup).wrapInner("<div class='wrapper'></div>");
}
/* Open popup */
$(popup).show();
/* Close popup if user clicks on background */
$(popup).click(function(e) {
if ( e.target == this ) {
if ($(popup).is(':visible')) {
$(popup).hide();
}
}
});
/* Close popup and remove errors if user clicks on cancel or close buttons */
$(popup).find("button[name=close]").on("click", function() {
if ($(".formElementError").is(':visible')) {
$(".formElementError").remove();
}
$(popup).hide();
});
}
$(document).ready(function () {
$("[data-js=open]").on("click", function() {
popupOpenClose($(".popup"));
});
});

Try this code, I have added a simple form. You can just change the css of the popup or the form as you need.
function toggleOn(){
$('body, #menu, #navbar, #content').toggleClass('on');
}
$(document).ready(function (){
$('#menu').click(function(){ toggleOn(); });
$('#content').click(function(){
if ($('#navbar').hasClass('on')) toggleOn();
});
});
//this is for the pop up
function popupOpenClose(popup) {
/* Add div inside popup for layout if one doesn't exist */
if ($(".wrapper").length == 0){
$(popup).wrapInner("<div class='wrapper'></div>");
}
/* Open popup */
$(popup).show();
/* Close popup if user clicks on background */
$(popup).click(function(e) {
if ( e.target == this ) {
if ($(popup).is(':visible')) {
$(popup).hide();
}
}
});
/* Close popup and remove errors if user clicks on cancel or close buttons */
$(popup).find("button[name=close]").on("click", function() {
if ($(".formElementError").is(':visible')) {
$(".formElementError").remove();
}
$(popup).hide();
});
}
$(document).ready(function () {
$("[data-js=open]").on("click", function() {
popupOpenClose($(".popup"));
});
});
//search bar
$(document).on('ready', function(){
var $wrap = $('[js-ui-search]');
var $close = $('[js-ui-close]');
var $input = $('[js-ui-text]');
$close.on('click', function(){
$wrap.toggleClass('open');
});
$input.on('transitionend webkitTransitionEnd oTransitionEnd', function(){
console.log('triggered end animation');
if ($wrap.hasClass('open')) {
$input.focus();
} else {
return;
}
});
});
// pop up window
body {
color: white;
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: inherit;
background: #000000;
perspective: 600px;
}
body h1, body h2 {
position: absolute;
left: 50%;
transform: translateX(-50%);
color: white;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
}
body h1 {
top: 24px;
font-size: 12px;
color: #cc0000;
margin-top: 200px;
}
body h2 {
font-size: 10px;
opacity: 0.7;
color: #cc0000;
z-index: 1;
}
body .msg {
position: absolute;
display: inline-block;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-radius: 3px;
padding: 10px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
body.on {
overflow: hidden;
}
#menu {
z-index: 100;
position: fixed;
width: 40px;
height: 40px;
top: 50px;
right: 50px;
background: none;
border: none;
border-radius: 5px;
outline: none;
cursor: pointer;
transition: all 0.2s ease-in-out;
transform: rotate(-90deg);
}
#menu:hover {
background: #cc0000;
transition: all 0.2s ease-in-out;
}
#menu #line {
position: absolute;
width: 22px;
height: 2px;
left: 9px;
top: 19px;
background: white;
}
#menu #arrow {
position: absolute;
width: 6px;
height: 6px;
top: 16px;
right: 9px;
border-top: 2px solid white;
border-right: 2px solid white;
transform: rotate(45deg);
}
#menu.on {
transition: all 0.2s ease-in-out;
transform: rotate(90deg);
}
#menu.on:hover {
background: #404040;
transition: all 0.2s ease-in-out;
}
section {
position: relative;
width: 100%;
height: 450px;
padding: 1.5px 2.5px;
background: black;
transition: all 0.3s ease-in-out;
}
section.msg {
position: absolute;
opacity: 0.8;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
section.on {
box-shadow: 0 5px 20px #333333;
border-radius: 6px;
cursor: zoom-out;
transition: all 0.3s ease-in-out;
transform-origin: 50% 0;
transform: scale(0.8) translateY(100vh);
}
#navbar {
margin-top: 60px;
z-index: 90;
position: fixed;
width: 90vw;
height: 70vh;
top: 0;
left: 50%;
opacity: 0;
overflow: hidden;
transition: all 0.3s ease-in-out;
transform-origin: 50% 0;
transform: translateX(-50%) scale(0);
}
#navbar .msg {
background: #404040;
}
#navbar.on {
top: 5vh;
opacity: 1;
transition: all 0.3s ease-in-out;
transform: translateX(-50%) scale(1);
}
/* BASE
================================================================= */
html {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: 'Lato', sans-serif;
font-size: 18px;
line-height: 2.35;
color: #cc0000;
margin: 0;
}
p {
padding-top: 3em;
max-width: 700px;
margin: 0 auto;
}
/* DYNAMIC NAVIGATION BAR
================================================================= */
nav {
position: fixed;
width: 100%;
top: 0;
background: black;
-webkit-transition: all 650ms cubic-bezier(0.22, 1, 0.25, 1);
transition: all 650ms cubic-bezier(0.22, 1, 0.25, 1);
z-index: 1;
height: 80px;
}
nav:before {
content: "";
display: block;
position: absolute;
background: rgba(0, 0, 0, 0.27);
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
nav ul {
position: relative;
margin: 0;
z-index: 2;
text-transform: uppercase;
text-align: center;
}
nav ul li {
display: inline-block;
padding: 1.35em 0;
margin-right: 3em;
font-size: 0.9em;
}
nav ul li a {
text-decoration: none;
color: #cc0000;
font-size: 0.9em;
}
nav ul li a:hover{
color: white;
}
.edit{
margin-top: 150px;
}
.direct{
margin-top: 250px;
color: white;
}
button {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
background: lightcoral;
border: 0;
border-radius: 4px;
padding: 7px 15px;
font-size: 16px;
color: #FFFFFF;
cursor: pointer;
}
button:focus {
outline: none;
}
button:hover {
background: #f39797;
}
.popup {
background: rgba(255, 255, 255, 0.8);
position: fixed;
display: none;
z-index: 5000;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
.popup > div {
border-radius: 4px;
position: fixed;
background: #FFFFFF;
box-shadow: 0px 0px 12px #666666;
padding: 30px 15px;
/* Width of popup can be changed */
width: 80%;
max-width: 600px;
z-index: 5001;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
text-align: center;
}
.logo{
float: left;
}
.logos{
margin-top: -9px;
width: 150px;
height: 100%;
}
section.content{
margin-top: 400px;
}
.stuff{
margin-top: 100px;
height: 350px;
width: 100%;
object-fit: cover;
opacity: .4;
}
.products{
margin-left: 560px;
margin-top: 360px;
}
.footy{
color: white;
background: black;
height:140px;
width: 100%;
}
.about_info{
width: 80%;
float: left;
font-size: 14px;
margin-left: 30px;
}
.about_us{
margin-left: 30px;
}
.reach_out{
float: left;
margin-top: -90px;
margin-left: 10px;
}
.account{
margin-left:
}
.follow{
float: right;
margin-right: 30px;
display: inline-block;
}
.product_line{
height: 250px;
width: 100%;
background: white;
}
.protein{
margin-bottom: 25px;
padding-bottom: 20px;
}
.social{
float: right;
margin-top: 30px;
}
form{
width:100%;
text-align:center;
}
input[type="text"] {
-webkit-appearance: none;
outline: none;
border: none;
}
.search-wrap {
position: relative;
display: block;
z-index: 1;
width: 40px;
height: 40px;
margin-left: 0;
padding: 0;
border: 2px solid white;
border-radius: 20px;
-moz-transition: all 0.25s ease 0.3s;
-o-transition: all 0.25s ease 0.3s;
-webkit-transition: all 0.25s ease;
-webkit-transition-delay: 0.3s;
transition: all 0.25s ease 0.3s;
}
.search-wrap:before {
top: 90%;
left: 90%;
width: 16px;
height: 2px;
background-color: white;
border-radius: 1px;
-moz-transition: width 0.15s ease 0.55s;
-o-transition: width 0.15s ease 0.55s;
-webkit-transition: width 0.15s ease;
-webkit-transition-delay: 0.55s;
transition: width 0.15s ease 0.55s;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-moz-transform-origin: top left;
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
transform-origin: top left;
}
.search-wrap input {
width: 100%;
height: 100%;
padding: 0 30px 0 15px;
font-size: 14px;
line-height: 38px;
opacity: 0;
background-color: transparent;
-moz-transition: opacity 0.15s ease;
-o-transition: opacity 0.15s ease;
-webkit-transition: opacity 0.15s ease;
transition: opacity 0.15s ease;
}
.eks {
display: block;
position: absolute;
top: 50%;
right: 0;
z-index: 20;
width: 30px;
height: 30px;
cursor: pointer;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.eks:before, .eks:after {
right: 5px;
height: 2px;
width: 2px;
border-radius: 1px;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.eks:before {
top: 0px;
background-color: white;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-moz-transform-origin: top right;
-ms-transform-origin: top right;
-webkit-transform-origin: top right;
transform-origin: top right;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.eks:after {
bottom: 0px;
background-color: white;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-moz-transform-origin: bottom right;
-ms-transform-origin: bottom right;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.search-wrap.open {
width: 160px;
-moz-transition-delay: 0.1s;
-o-transition-delay: 0.1s;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.search-wrap.open:before {
width: 0px;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.search-wrap.open input {
opacity: 1;
-moz-transition-delay: 0.15s;
-o-transition-delay: 0.15s;
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.search-wrap.open .eks:before, .search-wrap.open .eks:after {
width: 15px;
right: 12px;
}
.search-wrap.open .eks:before {
top: 9px;
-moz-transition-delay: 0.25s;
-o-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.search-wrap.open .eks:after {
bottom: 9px;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.search-wrap:before, .eks:before, .eks:after {
content: "";
position: absolute;
display: block;
}
a{
color: white;
}
a:hover{
color: red;
}
.reach_out{
list-style-type: none;
}
.links{
margin-top: 30px;
margin-right: 30px;
list-style-type: none;
}
.icon-button {
background-color: white;
border-radius: 2.6rem;
cursor: pointer;
display: inline-block;
font-size: 1.3rem;
height: 2.6rem;
line-height: 2.6rem;
margin: 0 5px;
position: relative;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 2.6rem;
}
/* Circle */
.icon-button span {
border-radius: 0;
display: block;
height: 0;
left: 50%;
margin: 0;
position: absolute;
top: 50%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 0;
}
.icon-button:hover span {
width: 2.6rem;
height: 2.6rem;
border-radius: 2.6rem;
margin: -1.3rem;
}
/* Icons */
.icon-button i {
background: none;
color: white;
height: 2.6rem;
left: 0;
line-height: 2.6rem;
position: absolute;
top: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 2.6rem;
z-index: 10;
}
.twitter span {
background-color: #4099ff;
}
.facebook span {
background-color: #3B5998;
}
.google-plus span {
background-color: #db5a3c;
}
.tumblr span {
background-color: #34526f;
}
.instagram span {
background-color: #517fa4;
}
.youtube span {
background-color: #bb0000;
}
.pinterest span {
background-color: #cb2027;
}
.icon-button .fa-twitter {
color: #4099ff;
}
.icon-button .fa-facebook {
color: #3B5998;
}
.icon-button .fa-tumblr {
color: #34526f;
}
.icon-button .fa-instagram {
color: #517fa4;
}
.icon-button .fa-youtube {
color: #bb0000;
}
.icon-button .fa-pinterest {
color: #cb2027;
}
.icon-button:hover .fa-twitter,
.icon-button:hover .fa-facebook,
.icon-button:hover .icon-google-plus,
.icon-button:hover .fa-tumblr,
.icon-button:hover .fa-instagram,
.icon-button:hover .fa-youtube,
.icon-button:hover .fa-pinterest {
color: white;
}
#media all and (max-width: 680px) {
.icon-button {
border-radius: 1.6rem;
font-size: 0.8rem;
height: 1.6rem;
line-height: 1.6rem;
width: 1.6rem;
}
.icon-button:hover span {
width: 1.6rem;
height: 1.6rem;
border-radius: 1.6rem;
margin: -0.8rem;
}
/* Icons */
.icon-button i {
height: 1.6rem;
line-height: 1.6rem;
width: 1.6rem;
}
body {
padding: 10px;
}
.pinterest {
display: none;
}
}
.wrapper {
max-width: 60rem;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 3rem;
}
.box {
width: 15rem;
height: 20rem;
padding: 0 2rem 3rem;
transition:
transform 0.3s linear 0s,
filter 0.5s linear 0.3s,
opacity 0.5s linear 0.3s;
/*transform-origin: top center;*/
}
.production {
position: relative;
width: 100%;
height: 100%;
border-radius: 0.2rem;
background-image: url(https://www.lamnia.com/images/sg-150-Shirts_and_T-Shirts.jpg);
background-color: #fff;
background-position: top 3rem center;
background-size: 80%;
background-repeat: no-repeat;
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
transition:
box-shadow 0.5s linear,
height 0.1s linear 0s;
}
.name {
display: block;
padding: 1rem 0.5rem;
}
.description {
position: absolute;
bottom: 1rem;
left: 0;
right: 0;
display: block;
padding: 0 1.5rem;
opacity: 0;
transition: opacity 0.1s linear 0s;
}
.wrapper:hover .box:not(:hover) {
filter: blur(3px);
opacity: 0.5;
}
.box:hover {
transform: scale(1.1);
transition:
transform 0.3s linear 0.3s,
filter 0.1s linear 0s,
opacity 0.1s linear 0s;
}
.box:hover .production {
height: 23rem;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
transition:
box-shadow 1s linear,
height 0.3s linear 0.5s;
}
.box:hover .description {
opacity: 1;
transition: opacity 0.3s linear 0.75s;
}
form{
background: white;
text-align: center;
overflow: scroll;
padding: 0;
margin: 0;
max-height: 400px
}
/* This is for pop window */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<head>
<link rel="stylesheet" href=" https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
</head>
<button id="menu"><span id="line"></span><span id="arrow"></span></button>
<nav id="nav">
<ul>
<li class="logo"><img class="logos" src="http://res.cloudinary.com/dvrqqa6ja/image/upload/v1466803605/logo_jayvyh.png"></img></li>
<li>Home </li>
<li>Shop </li>
<li>About Us</li>
<li><div class="search-wrap" js-ui-search>
<input type="text" placeholder="Search..." / js-ui-text>
<span class="eks" js-ui-close></span>
</div> </li>
</ul>
</nav>
<aside id="navbar"><span class="msg"><iframe width="560" height="315" src="https://www.youtube.com/embed/fAE8NyE3RkA" frameborder="0" allowfullscreen></iframe></span>
</aside>
<section id="content">
<img src="http://res.cloudinary.com/dvrqqa6ja/image/upload/v1466885774/kai_di6moq.jpg"class="stuff"> </img>
<h1 class="direct"> <strong>Click the arrow to view Kai Greene's Scar Story</strong></h1>
<span class="msg"><button class="btn btn-danger"data-js="open">Subscribe to our Newsletter</button></span>
</section>
<div class="popup">
<h2>Subscribe to the Newletter:</h2><br>
<form action="#">
First name:<br>
<input type="text" name="firstname" placeholder="firstname"><br>
Last name:<br>
<input type="text" name="lastname" placeholder="lastname"><br><br>
<input type="submit" value="Submit">
</form
<center><button name="close">Close Pop-up</button></center>
</div>
<div class="product_line">
<div class="row">
<div class="col-xs-12">
<span class="products text-center">View other products</span>
</div>
</div>
<div class="row">
<div class="wrapper">
<div class="box">
<div class="production">
<span class="name"></span>
<span class="description"></span>
</div>
</div>
<div class="box">
<div class="production">
<span class="name"></span>
<span class="description"></span>
</div>
</div>
<div class="box">
<div class="production">
<span class="name"></span>
<span class="description"></span>
</div>
</div>
</div>
</div>
</div>
<footer class="footy">
<div class="container-fluid">
<hr>
<div class="row">
<div class="col-xs-4">
<h4 class="about_us">About Us </h4>
</div>
<div class="col-xs-4">
<h4 class="account text-center"> My Account </h4>
</div>
<div class="col-xs-4">
<h4 class="follow"> Follow Us </h4>
</div>
<div class="row">
<div class="col-xs-4">
<p class="about_info"> Dynamik Muscle was spawned on the creation of an idea to see a dream manifest into reality. We all sit back and dream, some even make goals and outline a plan of action, but few follow through.click to read more</p>
</div>
<div class="col-xs-4">
<ul class="links text-center">
<li> Search </li>
<li> About Us </li>
<li>Privacy Policy </li>
<li> Refund Policy </li>
<li> Shipping and Delivery </li>
<li> Ambassador Program </li>
<li> Retailers/Distributors </li>
</ul>
</div>
<div class="col-xs-4">
<ul class="social">
<i class="fa fa-twitter"></i><span></span>
<i class="fa fa-facebook"></i><span></span>
<i class="fa fa-youtube"></i><span></span>
<i class="fa fa-pinterest"></i><span></span>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<ul class="reach_out">
<li><i class="fa fa-home" aria-hidden="true"></i> 1120 Holland Drive #20 </li>
<li><i class="fa fa-phone" aria-hidden="true"></i> Call Us at (561) 510-6765</li>
<li><i class="fa fa-envelope" aria-hidden="true"></i> cs#dynamikmuscle.com </li>
</ul>
</div>
</div>
</div>
</footer>
Here is the link to fiddle

You will need to format your
<div class="popup">
<h2>Subscribe to the Newletter:</h2><br>
<center><button name="close">Close Pop-up</button></center>
</div>
But you did not mention how do you want your popup to be displayed, i.e, center ? or anything other information. This works for me and looks good enough.

Develop Reference

JavaScript is the programming language of the Web.

Automatic popup [duplicate] - javascript

Related

Hide mobile menu when clicking on a link

Cannot click buttons in modal

How to set underline on hover on navigation links on responsive menu?

Js var, not defined [duplicate]

My Pop Up Window isn't displaying right

Categories

Resources