Div hidden make space in HTML

Question

Div hidden make space in HTML

Navigation

#1 by (5 votes)
#2 by (3 votes)

0

I have two modal windows created with CSS only

Even though they are hidden, they make space between the HTML, the title of the page and the condo:

TITULO
-
-
-
-
-
-
-
-
-
CONTENIDO

Here's the HTML:

 <div id="ocultar">
    <div class="modal-wrapper" id="popup1">
    <div class="popup-contenedor">
    <h2>Circunstancias Atenuantes</h2>
    <?php
    listaAtenuantes();
    ?>
    <a class="popup-cerrar" onclick="verificar();" href="#">ACEPTAR</a>
    </div>
    </div>

    <div class="modal-wrapper" id="popup2">
    <div class="popup-contenedor">
    <h2>Circunstancias Agravantes</h2>
    <?php
    listaAgravantes();
    ?>
    <a class="popup-cerrar" onclick="verificar();" href="#">ACEPTAR</a>
    </div>
    </div>
    </div>

Here the CSS:

#popup1 {
   visibility: hidden;
   opacity: 0;
   margin-top: -300px;
}

#popup2 {
   visibility: hidden;
   opacity: 0;
   margin-top: -300px;
}

#popup1:target {
   visibility:visible;
   opacity: 1;
   background-color: rgba(0,0,0,0.8);
   position: fixed;
   top:0;
   left:0;
   right:0;
   bottom:0;
   margin:0;
   z-index: 999;
   -webkit-transition:all 1s;
   -moz-transition:all 1s;
   transition:all 1s;
}

#popup2:target {
   visibility:visible;
   opacity: 1;
   background-color: rgba(0,0,0,0.8);
   position: fixed;
   top:0;
   left:0;
   right:0;
   bottom:0;
   margin:0;
   z-index: 999;
   -webkit-transition:all 1s;
   -moz-transition:all 1s;
   transition:all 1s;
}

.popup-contenedor {
   position: relative;
   margin:7% auto;
   padding:30px 50px;
   background-color: #fafafa;
   color:#333;
   border-radius: 3px;
   width:50%;
}
a.popup-cerrar {
   position: absolute;
   top:3px;
   right:3px;
   background-color: #333;
   padding:7px 10px;
   font-size: 20px;
   text-decoration: none;
   line-height: 1;
   color:#fff;
}

How can I prevent them from making so much space?

MODIFIED CSS

#popup1 {
   display: none;
   opacity: 0;
   margin-top: -300px;
}

#popup2 {
   display: none;
   opacity: 0;
   margin-top: -300px;
}

#popup1:target {
   display: block;
   opacity: 1;
   background-color: rgba(0,0,0,0.8);
   position: absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
   margin:0;
   z-index: 999;
   -webkit-transition:all 1s;
   -moz-transition:all 1s;
   transition:all 1s;
}

#popup2:target {
   display: block;
   opacity: 1;
   background-color: rgba(0,0,0,0.8);
   position: absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
   margin:0;
   z-index: 999;
   -webkit-transition:all 1s;
   -moz-transition:all 1s;
   transition:all 1s;
}

.popup-contenedor {
   position: absolute;
   margin:7% auto;
   padding:30px 50px;
   background-color: #fafafa;
   color:#333;
   border-radius: 3px;
   width:50%;
}
a.popup-cerrar {
   position: absolute;
   top:3px;
   right:3px;
   background-color: #333;
   padding:7px 10px;
   font-size: 20px;
   text-decoration: none;
   line-height: 1;
   color:#fff;
}

They do not make space anymore, but when they show up they stick to the left, not centered

html css

asked by Victor Alvarado 10.03.2017 в 17:55

source

2 answers

3

The visibility property hides the elements but still occupies the space within the structure of your HTML. As indicated earlier, change this property to display: none , which also hides the elements but does not preserve the space.

answered by 10.03.2017 в 18:13

How to include GAM in Genexus Evo 3 [closed] Fill a list with contents of an Api

score 5 · Accepted Answer

First of all, as you have already been told, the visibility property only hides the element inside the tree, but it never disappears, it always remains there and occupies a space like any box. For this purpose you can use display: none .

However, good user experience (UX) practices recommend that a modal must be absolute and have a greater relevance in the element stack. That is, a modal represents greater importance or urgency in an application.

.modal-wrapper {
  height: 100vh;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

#popup1, #popup2 {
  display: inline-block;
  left: 50%;
  position: absolute;
  top: 40px;
  transform: translateX(-50%); /* centra horizontalmente */
  z-index: 10; /* mientras más, más arriba en la pila se mostrará */
}

Example of a modal

Here I give you an example of how a modal should look to keep the focus of attention on it. It is important that it be fixed so that even if the scroll is done, the modal is always visible and the user does not lose contact with it.

@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700');
*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Noto Sans';
  height: 500vh;
}

.modal-wrapper {
  background-color: rgba(0, 0, 0, .5);
  height: 100vh;
  position: fixed;
  width: 100%;
}

.modal {
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 5px;
  box-shadow: 0 2px 8px 2px rgba(0, 0, 0, .15);
  left: 50%;
  transform: translateX(-50%);
  max-height: 600px;
  max-width: 500px;
  position: fixed;
  top: 40px;
  width: 90%;
  z-index: 5;
}

.modal-header,
.modal-footer {
  height: 60px;
  line-height: 60px;
  padding: 0 12px;
}

.modal-header {
  border-bottom: 1px solid #eee;
}

.modal-header h4 {
  color: #777;
  font-weight: 600;
}

.modal-body {
  padding: 15px;
}

.modal-body h3 {
  color: #555;
  font-weight: 400;
  text-align: center;
}

.modal-footer {
  border-top: 1px solid #eee;
  text-align: right;
}

.btn {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  color: #555;
  height: 35px;
  line-height: 35px;
  padding: 0 12px;
}

.btn:hover {
  background-color: #f9f9f9;
}

.btn.danger {
  background-color: #ff0065;
  border-color: transparent;
  color: #fff;
}

.btn.danger:hover {
  background-color: #ff3d8b;
}

.btn.danger:active {
  background-color: f20061;
}

<div class="modal-wrapper">
  <div class="modal">
    <header class="modal-header">
      <h4>Atención</h4>
    </header>
    <article class="modal-body">
      <h3>¿Seguro que desea eliminar los mensajes?</h3>
    </article>
    <footer class="modal-footer">
      <button class="btn">
        Cancel
      </button>
      <button class="btn danger">
        Delete
      </button>
    </footer>
  </div>
</div>