1

Quiero tener un botón que esté siempre visible solo dentro del modal es decir, cuando abra ese modal, da igual cuanto baje, que el botón siempre esté visible.

El problema está que no puedo poner ese botón fuera del modal, no tengo esa posibilidad...

He intentado esto, pero no funciona...

.mi-contenido {
  height: 300vh;
  position: absolute;
}

.mi-boton {
  position: fixed;
  top: 80vh;
  left: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body mi-contenido">
          <button class="mi-boton">Hola!</button>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

8
  • por qué no funciona? yo lo haría con JQuery o Javascript
    – Iria
    el 11 feb. 2020 a las 10:16
  • No me funciona porque cuando abres el modal, el botón se desplaza con el scroll, y yo lo que quiero es que esté siempre en la mimsa posición en la pantalla
    – Pavlo B.
    el 11 feb. 2020 a las 10:19
  • y qué pasa si por ejemplo quieres que esté arriba del todo, bajas la pantalla, se supone que debe desaparecer?
    – Iria
    el 11 feb. 2020 a las 10:33
  • tengo una idea, saca el botón del modal, y haz el modal transparente y cuando cierres el modal o en funcion de ciertos eventos, desaparec el boton. Creo que tu problema es que es fixed respecto del modal no respecto a todo el screen.
    – Iria
    el 11 feb. 2020 a las 10:34
  • No debe desaparecer nunca mientras el modal esté abierto, pero el botón debe quedar dentro del modal a cualquier tamaño de la pantalla, pero siempre visible como por ejemplo el botón del gmail de android con el + que siempre está en pantalla y visible en la esquina, pues algo como eso...
    – Pavlo B.
    el 11 feb. 2020 a las 10:41

2 respuestas 2

1

Hay un punto sobre el posicionamiento fijo y absoluto que mucha gente desconoce y que, en casos como estos, son la clave de su funcionamiento.

Cuando indicamos que un elemento tenga este tipo de posición, damos por hecho que es posicionamiento absoluto/fijo sobre el body, es decir, lo coloco en una posición que le indico respecto al padre contenedor de todo el código. Esto no es correcto.

¿Cómo funciona?

Estos tipos de posicionamientos se refieren al padre inmediato cuyo posicionamiento sea relativo. Es decir, si hay un contenedor superior a nuestro absoluto, pero posterior al body, el posicionamiento se realizará sobre ese contendor.

En tu ejemplo, el elemento con clase mi-contenido tiene un posicionamiento relativo (es el que tienen de base todos los elementos a no ser que se modifiquen) y, por lo tanto, al ponerle al botón una posición absoluta o fija actuará sobre este elemento (moviéndose con él).

¿Cómo solucionarlo?

Como bien te han indicado, existe un posicionamiento "pegajoso" (position: sticky), este actúa según la posición del scroll del usuario, comportándose como un elemento relativo hasta que su posición es pasada por el scroll, que se comporta como un fijo. Aquí puedes ver más información al respecto.

.mi-contenido {
  height: 300vh;
  position: absolute;
}

.mi-boton {
  position: sticky;
  top: 80vh;
  left: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body mi-contenido">
          <button class="mi-boton">Hola!</button>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

1
.mi-boton {
  position: sticky;
  top: 80vh;
  left: 50px;
}

Echa un vistazo a w3schools.com/css/css_positioning.asp, explica como usar sticky, creo que es lo que necesitas

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.