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>
Related
I am very new to css and i am trying to align the text center in the button, but i am not able to get it centered. Please look into my code and help me to fix it.
.new-btn{
clear:both;
white-space:nowrap;
display: inline-block;
height: 60px;
min-width: 270px;
float: left;
align-items: center;
justify-content: center;
margin: 10px 5px;
overflow: hidden;
background: #fff;
border-radius: 50px;
cursor: pointer;
box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
transition: all 0.3s ease-out;
}
.new-btn > span, .new-icn > i {
float:left;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s;
line-height:1em
}
.new-icn > i{
display: inline-block;
height: 60px;
width: 60px;
text-align: center;
border-radius: 50px;
box-sizing: border-box;
line-height: 60px;
transition: all 0.3s ease-out;
font-size: 25px;
line-height: 60px;
transition: all 0.3s ease-out;
color: #fff;
}
.new-btn > span{
font-family: 'Poppins', sans-serif;
font-size: 20px;
font-weight: 550;
line-height: 60px;
margin-left: 10px;
transition: all 0.3s ease-out;
}
.new-yt > i {
background: #ff0000;
}
.new-yt > span {
color: #ff0000;
}
<a class="new-btn new-icn new-yt" href="#"><i class="fab fa-youtube"></i><span>Youtube</span></a>
text-align: center; is also not working. I have been trying to fix this for hours but still no luck. The result look like this
span is an inline element, so you need to set it to inline-block, then set its width and finaly text-align:center
p/s: research about flex. it will make your life easier
did some changes to your css instead of inline block i used flex and for the span it takes the width of 100% and reduced double the size of red circle width it also has display f;ex in it to justify the text to the center
.new-btn {
clear: both;
white-space: nowrap;
display: flex;
height: 60px;
min-width: 270px;
float: left;
align-items: center;
justify-content: flex-start;
margin: 10px 5px;
overflow: hidden;
background: #fff;
border-radius: 50px;
cursor: pointer;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease-out;
}
.new-btn>span,
.new-icn>i {
float: left;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
line-height: 1em
}
.new-icn>i {
display: inline-block;
height: 60px;
width: 60px;
text-align: center;
border-radius: 50px;
box-sizing: border-box;
line-height: 60px;
transition: all 0.3s ease-out;
font-size: 25px;
line-height: 60px;
transition: all 0.3s ease-out;
color: #fff;
}
.new-btn>span {
font-family: 'Poppins', sans-serif;
font-size: 20px;
font-weight: 550;
line-height: 60px;
margin-left: 10px;
transition: all 0.3s ease-out;
display: flex;
justify-content: center;
width: calc(100% - 120px);
}
.new-yt>i {
background: #ff0000;
}
.new-yt>span {
color: #ff0000;
}
<a class="new-btn new-icn new-yt" href="#"><i class="fab fa-youtube"></i><span>Youtube</span></a>
Altered the code a bit, making the outside container a flex and centring the text as a span.
using the ::before treatment for the red circle element it is absolutely positioned and will ignore the 'Youtube' text
.new-btn{
clear:both;
position:relative;
white-space:nowrap;
display: flex;
height: 60px;
min-width: 270px;
float: left;
align-items: center;
justify-content: center;
margin: 10px 5px;
overflow: hidden;
background: #fff;
border-radius: 50px;
cursor: pointer;
box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
transition: all 0.3s ease-out;
}
.new-btn > span, .new-icn > i {
float:left;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s;
line-height:1em
}
.new-icn::before{
content:"";
display:inline-block;
position:absolute;
left:0;
top:0;
height: 60px;
width: 60px;
text-align: center;
border-radius: 50px;
box-sizing: border-box;
line-height: 60px;
transition: all 0.3s ease-out;
font-size: 25px;
line-height: 60px;
transition: all 0.3s ease-out;
color: #fff;
background-color: #ff0000;
}
.new-btn > span{
font-family: 'Poppins', sans-serif;
font-size: 20px;
font-weight: 550;
line-height: 60px;
margin-left: 10px;
transition: all 0.3s ease-out;
}
.new-yt > i {
background: #ff0000;
}
.new-yt > span {
color: #ff0000;
}
.text{
display:flex;
}
<a class="new-btn new-icn new-yt" href="#"><span class="text">Youtube</span></a>
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>
I would like copy a custom select box from here --> https://codepen.io/microfront/pen/NXGrGQ into my website,
but it's not work when I paste the whole code.
I can't figure out how. I tried to copy all the html, css and java but doesn't work, then I even tried to convert scss to css still not working
I have this result from any navigator screenshot
body {
margin: 0;
font-family: 'Playfair Display', serif;
padding: 0 15px;
}
h1 {
font-size: 50px;
line-height: 54px;
text-align: center;
margin: 100px auto 60px;
max-width: 600px;
}
/*Chosen style*/
.chosen-wrapper {
margin: 0 auto 25px;
max-width: 400px;
position: relative;
}
.chosen-wrapper:after {
pointer-events: none;
content: "";
position: absolute;
top: 32px;
right: 20px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 8px solid rgba(0, 0, 0, 0.5);
transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 9;
}
.chosen-wrapper.is-active:after {
border-top: 8px solid black;
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.chosen-wrapper .chosen-container .chosen-single {
border-radius: 0;
height: 70px;
border: solid 2px #d9d9d9;
background: #fff;
font-size: 22px;
color: rgba(0, 0, 0, 0.5);
padding: 0 30px;
line-height: 66px;
transition: all 0.3s ease;
box-shadow: none;
background: #fff;
}
.chosen-wrapper .chosen-container .chosen-single b {
display: none !important;
}
.chosen-wrapper .chosen-container .chosen-single span {
letter-spacing: 0;
padding: 0;
line-height: inherit;
}
.chosen-wrapper .chosen-container.chosen-with-drop .chosen-single {
border-width: 2px 2px 1px;
border-color: #000 #000 #d9d9d9;
color: #000;
background-image: none;
}
.chosen-wrapper .chosen-container.chosen-with-drop .chosen-drop {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.chosen-wrapper .chosen-container.chosen-container-single-nosearch .chosen-search {
display: none;
}
.chosen-wrapper .chosen-container .chosen-drop {
letter-spacing: 0;
border-radius: 0;
box-shadow: none;
border-width: 0 2px 2px;
border-color: #000;
margin-top: 0;
-webkit-transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
-o-transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53);
opacity: 0;
}
.chosen-wrapper .chosen-container .chosen-results {
font-size: 22px;
color: #000;
max-height: 245px;
margin: 0;
padding: 0;
}
.chosen-wrapper .chosen-container .chosen-results li {
padding: 16px 30px 18px;
margin: 0;
border-bottom: 1px solid #e5e5e5;
-webkit-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
-o-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
line-height: 20px;
}
.chosen-wrapper .chosen-container .chosen-results li.highlighted {
background-color: #eeeeee !important;
color: #000;
background-image: none;
}
.chosen-wrapper--style2:after {
right: 0;
}
.chosen-wrapper--style2:before {
content: '';
width: 0;
border-top: 2px solid #000;
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
transition: all 0.2s cubic-bezier(0.06, 1, 0.89, 0.85);
}
.chosen-wrapper--style2.is-active:before {
width: 100%;
}
.chosen-wrapper--style2 .chosen-container .chosen-single {
border-width: 0 0 2px;
padding: 0;
}
.chosen-wrapper--style2 .chosen-container.chosen-with-drop .chosen-single {
border-width: 0 0 2px;
}
.chosen-wrapper--style2 .chosen-container.chosen-with-drop .chosen-drop {
opacity: 1;
visibility: visible;
transform: translateY(5px);
}
.chosen-wrapper--style2 .chosen-container .chosen-drop {
border-color: #d9d9d9;
border-top: 2px solid #d9d9d9;
}
.chosen-wrapper--style2 .chosen-container .chosen-results li {
padding: 16px 15px 18px;
}
/*ScrollBox style*/
.nicescroll-rails {
border-left: 1px solid #d9d9d9;
transform: translate(-2px);
top: 0 !important;
}
.nicescroll-rails .nicescroll-cursors {
width: 6px !important;
margin-right: 2px;
}
.link {
position: absolute;
left: 0;
bottom: 0;
padding: 20px;
}
.link a {
display: flex;
align-items: center;
text-decoration: none;
color: #000;
}
.link .fa {
font-size: 28px;
margin-right: 8px;
color: #000;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Responsive custom select box</h1>
<!--Style 2-->
<div class="chosen-wrapper chosen-wrapper--style2">
<select class="chosen-select" data-placeholder="Lorem ipsum dolor sit amet">
<option></option>
<option>Consectetur adipiscing</option>
<option>Sed do eiusmod tempor</option>
</select>
</div>
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 posts in my blog have a slider which shows all the pictures within the post. All of the pictures are aligned to the left and I don't know how to fix this problem. I want them to align to the center and am not sure how to do that effectively.
here is my website:
http://reezyblog.blogspot.co.uk/
heres all the coding related to the slider:
/* ===[ Slider ]=== */
.homepage-slider {
opacity: 0;
margin-bottom: 60px;
}
.homepage-slider .slick-slide .featured-title {
text-align: center;
position: absolute;
margin: 0 auto;
top: 20%;
left: 30%;
width: 40%;
padding: 40px 30px 50px;
background: #fff;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.homepage-slider .slick-slide:hover .featured-title { background: rgba(255,255,255,.9) }
.homepage-slider .slick-slide .featured-title h2 {
font-family: 'Playfair Display', Georgia, 'Times New Roman', Times, serif;
font-size: 24px;
line-height: 1.2;
margin-bottom: 10px;
color: #111;
}
.homepage-slider .slick-slide .featured-title .featured-date {
color: #999;
font-size: 13px;
}
.homepage-slider .slick-slide .featured-title .featured-category {
display: inline-block;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
color: #e1534f;
margin-bottom: 10px;
border-radius: 3px;
}
Add this text-align: center to .slick-initialized .slick-slide class just like below
.slick-initialized .slick-slide {
display: block;
text-align: center;
}
and make your .slick-slide {display: inline-block;} just like below
.slick-slide img {
display: inline-block;
}