3

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>

1 respuesta 1

3

Veo varios Errores primero veo que en el código que subes no tienes la referencia a JQuery recuerda que es necesaria para su funcionamiento y segundo tienes un error en el CSS en este fragmento .modal { tienes mal la propiedad opacity si la cambias de 0 a otro valor funcionara, ademas tienes el margin en esta misma clase lo tienes muy alto lo cual oculta el modal, cámbialo por esto para que puedas ver como aparece el modal.

Te dejo tu snippet modificado, espero sea de ayuda:

$(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: 50%;
  height: 50%;
  display: block;
  margin: 1px 0px 0px -25%;
  margin-top: -10%;
  position: relative;
  top: 50%;
  left: 50%;
  background: white;
  opacity: 25;
  transition: all 0.5s ease-in-out;
}

.modal-wrapper.open.modal {
  margin-top: -200px;
  opacity: 1;
}

.head {
  width: 92.5%;
  height: 32px;
  padding: 12px 30px;

  background: #e2525c;
}

.btn-close {
  font-size: 28px;

  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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="simple-message" type="button" class="btn btn-primary trigger">
    Basic Message
</button>
<div class="modal-wrapper">
  <div class="modal">
    <div class="head">
      <a href="" class="btn-close trigger">
        <i class="fa fa-times">x</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>

1
  • 1
    Funciono Perfectamente la solución que me diste. Muchas Gracias Commented el 9 nov. 2019 a las 14:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.