2

Estoy usando top: 50%; pero no me centra verticalmente la ventana modal, cual es le problema?

CÓDIGO:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Simple Modal</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="css/style.css">
  <style type="text/css">
    
.container {
  width: 800px;
  height: auto;
  margin: auto;
}

.notice {
  position: relative;
  top: 50%;
  width: 90%;
  height: 200px;
  border-radius: 15px;
  background: #fff;
  margin: auto;
  z-index: 1;
}
.notice p {
  padding: 15px 40px;
}

.close {
  width: 25px;
  height: 25px;
  background: #fff;
  position: absolute;
  text-align: center;
  right: -7px;
  top: -7px;
  border-radius: 50%;
  cursor: pointer;
}
.close img{
  margin-top: 6px;
  margin-left: 1px;
  width: 12px;
}
.modal {
  position: fixed;
  background: rgba(0,0,0,0.7);
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.modal,
.notice {
  display: none;
}


.bar-title{
  width: 100%;
  background: #ec4b4b;
  border-radius: 15px 15px 0 0;
  padding: 15px 0
}

.bar-title span{
  color: #fff;
  margin-left: 30px;
  font-weight: 700
}
  </style>

  
</head>

<body>
  <div class="container">  
  <a href="#" class="btn">Ativar Modal</a>
</div>

<div class="modal"></div>
  <div class="notice">
    <div class="close"><img src="img/close-button.png" alt=""></div>
    <div class="bar-title">
      <span>TITULO</span>
    </div>
    <p>Conteido</p>
  </div>


    <script>
      $(document).ready(function(){

  $('.container a').click(function(){
  
    $('.modal,.notice').fadeIn(500,function(){});

  });

  $('.close,.modal').click(function(){
  
    $('.modal,.notice').fadeOut(500,function(){});
  
  });
  
  $(document).keyup(function(e) {

    if (e.keyCode == 27) { 
      $('.modal,.notice').fadeOut(500,function(){});
    };   // esc
  });
});
    </script>

</body>
</html>

4 respuestas 4

5

El problema es porque las etiquetas html y body no tienen tamaño. Si les agregas a estas etiquetas Height: 100%; el modal se centra.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Simple Modal</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="css/style.css">
  <style type="text/css">
 
html, body
{
	height: 100%;
}
 
.container {
  width: 800px;
  height: auto;
  margin: auto;
}

.notice {
  position: relative;
  top: 50%;
  width: 90%;
  height: 200px;
  border-radius: 15px;
  background: #fff;
  margin: auto;
  z-index: 1;
  margin-top: -100px;
}
.notice p {
  padding: 15px 40px;
}

.close {
  width: 25px;
  height: 25px;
  background: #fff;
  position: absolute;
  text-align: center;
  right: -7px;
  top: -7px;
  border-radius: 50%;
  cursor: pointer;
}
.close img{
  margin-top: 6px;
  margin-left: 1px;
  width: 12px;
}
.modal {
  position: fixed;
  background: rgba(0,0,0,0.7);
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.modal,
.notice {
  display: none;
}


.bar-title{
  width: 100%;
  background: #ec4b4b;
  border-radius: 15px 15px 0 0;
  padding: 15px 0
}

.bar-title span{
  color: #fff;
  margin-left: 30px;
  font-weight: 700
}
  </style>

  
</head>

<body>
  <div class="container">  
  <a href="#" class="btn">Ativar Modal</a>
</div>

<div class="modal"></div>
  <div class="notice">
    <div class="close"><img src="img/close-button.png" alt=""></div>
    <div class="bar-title">
      <span>TITULO</span>
    </div>
    <p>Conteido</p>
  </div>


    <script>
      $(document).ready(function(){

  $('.container a').click(function(){
  
    $('.modal,.notice').fadeIn(500,function(){});

  });

  $('.close,.modal').click(function(){
  
    $('.modal,.notice').fadeOut(500,function(){});
  
  });
  
  $(document).keyup(function(e) {

    if (e.keyCode == 27) { 
      $('.modal,.notice').fadeOut(500,function(){});
    };   // esc
  });
});
    </script>

</body>
</html>

1

Puedes ahorrarte trabajo si usas bottstrap, ya que todas las clases y configuraciones del mismo estan pre - diseñadas

Puedes descargarlo directamente desde su pagina http://getbootstrap.com/

Tambien puedes usar Bootsnipp http://bootsnipp.com/snippets/featured/squarespace-like-modal

Este enlace por ejemplo te dara todo lo que necesites

Si ninguna de estas opciones te sirven, intenta poner toda la modal en

 posicion:fixed;
 top: 40%;

Suerte

3
0

Aparte de lo que te dice Jemonge, veo algunas cosas extrañas. La primera cosa evidente es que tienes modal vacía que usa como referencia, notice. En mi opinión, la estructura está mal, no solo se trata de que funcione, en lo posible usa un marcado que sea evidente.

Respecto al centrado, hay varias formas. Una forma es usando flexbox en el contenedor para centrarla tanto vertical como horizontalmente; otra forma es usando top/left junto con transform. Si la modal tendrá un contenedor para que haga el.efecto oscuro o blur, entonces basta con darle al contenedor las dimensiones del viewport y hacer un centrado absoluto con flexbox.

Ejemplo

function hide() {
  this.classList.remove('visible');
}

const modal = document.getElementById('mi-modal');
const triggers = Array.from(modal.querySelectorAll('[role="close"]'));
triggers.forEach(function(trigger) {
  trigger.addEventListener('click', hide.bind(modal));
});

setTimeout(function() {
  modal.classList.add('visible');
}, 1000);
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
html {
  font-family: 'Open Sans';
}

.modal {
  align-items: center;
  background-color: rgba(0, 0, 0, .5);
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  transition: all .3s cubic-bezier(0.39, 0.575, 0.565, 1);
  visibility: hidden;
  width: 100%;
}

.modal.visible {
  opacity: 1;
  visibility: visible;
}

.modal.visible .modal-content {
  opacity: 1;
  transform: translateY(0px);
  visibility: visible;
}

.modal-content {
  background-color: #fff;
  border-radius: 4px;
  margin: 20px auto;
  max-width: 600px;
  opacity: 0;
  transform: translateY(-25px);
  transition: all .3s cubic-bezier(0.39, 0.575, 0.565, 1);
  visiblity: hidden;
}

.modal-content .modal-header {
  align-items: center;
  border-bottom: 1px solid #eee;
  display: flex;
  height: 50px;
  justify-content: center;
  padding: 0 12px;
  position: relative;
}

.modal-content .modal-header h4 {
  color: #555;
  font-family: 'Open Sans';
}

.modal-content .modal-header .modal-close {
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.modal-content .modal-body {
  padding: 20px;
}

.modal-content .modal-footer {
  align-items: center;
  display: flex;
  height: 60px;
  justify-content: flex-end;
  padding: 0 20px;
}


/* Estilos otros */

.button {
  background-color: #2980b9;
  border: 1px solid #2980b9;
  color: #fff;
  border-radius: 3px;
  font-size: 14px;
  font-family: 'Open Sans';
  height: 35px;
  padding: 0 12px;
}

h2 {
  color: #555;
  font-weight: 400;
  text-align: center;
}

p {
  color: #555;
  font-size: 15px;
}
<div class="modal" id="mi-modal">
  <div class="modal-content" style="width: 450px">
    <header class="modal-header">
      <h4>Información importante</h4>
      <span class="modal-close" role="close">
         &times;
      </span>
    </header>
    <article class="modal-body">
      <h2>Información importante</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eveniet placeat quia dicta explicabo, nemo iure libero natus error incidunt, voluptatum quas alias temporibus a. Eius quam odio dolorem corporis.
      </p>
    </article>
    <footer class="modal-footer">
      <button class="button" role="close">
        Acceptar
      </button>
    </footer>
  </div>
</div>

Para el cerrado de la modal, he elegido el atributo role para que cuando cualquier elemento pulsado cuyo valor sea close, actúe como un cerrador.

0

function hide() {
  this.classList.remove('visible');
}

const modal = document.getElementById('mi-modal');
const triggers = Array.from(modal.querySelectorAll('[role="close"]'));
triggers.forEach(function(trigger) {
  trigger.addEventListener('click', hide.bind(modal));
});

setTimeout(function() {
  modal.classList.add('visible');
}, 1000);
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
html {
  font-family: 'Open Sans';
background:red;
}

.modal {
  align-items: center;
  background-color: rgba(0, 0, 0, .5);
  display: flex;
  height: 50%;
  justify-content: center;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  transition: all .3s cubic-bezier(0.39, 0.575, 0.565, 1);
  visibility: hidden;
  width: 50%;
padding-left:300px;
}

.modal.visible {
  opacity: 1;
  visibility: visible;
}

.modal.visible .modal-content {
  opacity: 1;
  transform: translateY(0px);
  visibility: visible;
}

.modal-content {
  background-color: #fff;
  border-radius: 4px;
  margin: 20px auto;
  max-width: 600px;
  opacity: 0;
  transform: translateY(-25px);
  transition: all .3s cubic-bezier(0.39, 0.575, 0.565, 1);
  visiblity: hidden;
}

.modal-content .modal-header {
  align-items: center;
  border-bottom: 1px solid #eee;
  display: flex;
  height: 50px;
  justify-content: center;
  padding: 0 12px;
  position: relative;
}

.modal-content .modal-header h4 {
  color: #555;
  font-family: 'Open Sans';
}

.modal-content .modal-header .modal-close {
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.modal-content .modal-body {
  padding: 20px;
}

.modal-content .modal-footer {
  align-items: center;
  display: flex;
  height: 60px;
  justify-content: flex-end;
  padding: 0 20px;
}


/* Estilos otros */

.button {
  background-color: #2980b9;
  border: 1px solid #2980b9;
  color: #fff;
  border-radius: 3px;
  font-size: 14px;
  font-family: 'Open Sans';
  height: 35px;
  padding: 0 12px;
}

h2 {
  color: #555;
  font-weight: 400;
  text-align: center;
}

p {
  color: #555;
  font-size: 15px;
}
<div class="modal" id="mi-modal">
  <div class="modal-content" style="width: 450px">
    <header class="modal-header">
      <h4>Información importante</h4>
      <span class="modal-close" role="close">
         &times;
      </span>
    </header>
    <article class="modal-body">
      <h2>Información importante</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eveniet placeat quia dicta explicabo, nemo iure libero natus error incidunt, voluptatum quas alias temporibus a. Eius quam odio dolorem corporis.
      </p>
    </article>
    <footer class="modal-footer">
      <button class="button" role="close">
        Acceptar
      </button>
    </footer>
  </div>
</div>

Tu Respuesta

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

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