How to center modal window with css?

Question

How to center modal window with css?

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (0 votes)
#4 by (0 votes)

1

I'm using top: 50%; but I do not focus vertically on the modal window, what's the problem?

CODE:

<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>

css3 css

asked by Dayana Castillo 27.04.2017 в 01:21

source

4 answers

1

You can save work if you use bottstrap, since all classes and configurations are pre-designed

You can download it directly from its link

page

You can also use Bootsnipp link

This link for example will give you everything you need

If none of these options serve you, try putting the whole modal in

 posicion:fixed;
 top: 40%;

Luck

answered by 27.04.2017 в 01:28

0

Apart from what Jemonge tells you, I see some strange things. The first obvious thing is that you have an empty modal that you use as a reference, notice . In my opinion, the structure is wrong, it's not just about it working, but if possible use a marked that is obvious.

Regarding the centering, there are several ways. One way is by using flexbox in the container to center it both vertically and horizontally; another way is using top / left together with transform. If the modal will have a container to make the dark effect or blur, then it is enough to give the container the dimensions of the viewport and make an absolute centering with flexbox.

Example

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>

For closing the modal, I have chosen the attribute role so that when any element pressed whose value is close , act as a closer.

answered by 27.04.2017 в 02:07

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>

answered by 10.05.2017 в 17:38

Error connecting SQL Oracle g11 How to divide an array into two?

score 3 · Accepted Answer

The problem is because the html and body tags do not have size. If you add to these labels Height: 100%; the modal is centered.

<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>