Estoy haciendo un login y estoy probando el mensaje pop up , pero no se muestra el mensaje cuando doy clic en mis pruebas, pero sí se muestran efectos relacionados con la aparición del pop up como cambio de color del fondo.
Estoy basándome en el siguiente vídeo.
El problema es algo en CSS, pero no puedo identificarlo.
$(document).ready(function() {
$('.trigger').on('click', function() {
$('.modal-wrapper').toggleClass('open');
$('.container').toggleClass('blur-it');
return false;
})
});
/*Dividí el CSS en dos partes, la primera contiene el estilo del login y la segunda del pop up.*/
.modal-wrapper {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(41, 171, 164, 0.8);
visibility: hidden;
opacity: 0;
transition: all 0.25s ease-in-out;
}
.modal-wrapper.open {
opacity: 1;
visibility: visible;
}
.blur-it {
filter: blur(4px);
}
.modal {
width: 30%;
height: 20%;
display: block;
margin: 50% 0 0 -300px;
position: relative;
top: 50%;
left: 50%;
background: white;
opacity: 0;
transition: all 0.5s ease-in-out;
}
.modal-wrapper.open.modal {
margin-top: -200px;
opacity: 1;
}
.head {
width: 90%;
height: 32px;
padding: 12px 30px;
overflow: hidden;
background: #e2525c;
}
.btn-close {
font-size: 28px;
display: block;
float: right;
color: white;
}
.contentM {
padding: 10%;
}
.good-job {
text-align: center;
font-family: Tahoma;
color: #e2525c;
}
.good-job .fa-thumbs-o-up {
font-size: 60px;
}
.good-job h1 {
font-size: 45px;
}
<div class="modal-wrapper">
<div class="modal">
<div class="head">
<a href="" class="btn-close trigger">
<i class="fa fa-times"></i>
</a>
</div>
<div class="contentM">
<div class="good-job">
<i class="fa fa-thumbs-o-up"></i>
<h1>Good Job</h1>
</div>
</div>
</div>
</div>