Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Ventana emergente dentro de ventana emergente

Estas en el tema de Ventana emergente dentro de ventana emergente en el foro de CSS en Foros del Web. Hola, Estoy intentando hacer modal window donde si se hace clic en el contenido de esta ventana se abra una nueva ventana y se cierre ...
  #1 (permalink)  
Antiguo 03/05/2020, 16:33
 
Fecha de Ingreso: octubre-2009
Ubicación: Santa Fe
Mensajes: 206
Antigüedad: 14 años, 8 meses
Puntos: 7
Ventana emergente dentro de ventana emergente

Hola, Estoy intentando hacer modal window donde si se hace clic en el contenido de esta ventana se abra una nueva ventana y se cierre la anterior.

Consegui crear la ventana emergente, pero no logro hacer que al hacer clic en el contenido dentro de ella, se cierre y se abra una nueva.

Este es el codigo:

Código HTML:
</head>
<body>
<!-- partial:index.partial.html -->
<div class="modal-container">
  <input id="modal-toggle" type="checkbox">
  <label class="modal-btn" for="modal-toggle">Click me</label> 
  <label class="modal-backdrop" for="modal-toggle"></label>
  <div class="modal-content">
    <label class="modal-close" for="modal-toggle">&#x2715;</label>
    <h2>Modal title</h2><hr />
    <p>Hello from inside the modal!</p> 
    <label class="modal-content-btn" for="modal-toggle">OK</label>   
  </div>          
</div>
<!-- partial -->
  

</body> 
Código:
*, *:before, *:after {
  box-sizing: border-box;
}

body {
  height: 100vh;
  background: #ccc;
  overflow: hidden;
}

.modal-container {
  margin: 60px auto;
  padding-top: 0px;
  position: relative;
  width: 160px;
}
.modal-container .modal-btn {
  display: block;
  margin: 0 auto;
  color: #fff;
  width: 160px;
  height: 50px;
  line-height: 50px;
  background: #446CB3;
  font-size: 22px;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 5px 5px -5px #333;
  transition: background 0.3s ease-in;
}
.modal-container .modal-btn:hover {
  background: #365690;
}
.modal-container .modal-content,
.modal-container .modal-backdrop {
  height: 0;
  width: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  cursor: pointer;
  transition: opacity 0.2s ease-in;
}
.modal-container .modal-close {
  color: #aaa;
  position: absolute;
  right: 5px;
  top: 5px;
  padding-top: 3px;
  background: #fff;
  font-size: 16px;
  width: 25px;
  height: 25px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}
.modal-container .modal-close:hover {
  color: #333;
}
.modal-container .modal-content-btn {
  position: absolute;
  text-align: center;
  cursor: pointer;
  bottom: 20px;
  right: 30px;
  background: #446CB3;
  color: #fff;
  width: 50px;
  border-radius: 2px;
  font-size: 14px;
  height: 32px;
  padding-top: 9px;
  font-weight: normal;
}
.modal-container .modal-content-btn:hover {
  color: #fff;
  background: #365690;
}
.modal-container #modal-toggle {
  display: none;
}
.modal-container #modal-toggle.active ~ .modal-backdrop, .modal-container #modal-toggle:checked ~ .modal-backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s ease-in;
}
.modal-container #modal-toggle.active ~ .modal-content, .modal-container #modal-toggle:checked ~ .modal-content {
  opacity: 1;
  background-color: #fff;
  max-width: 400px;
  width: 400px;
  height: 280px;
  padding: 10px 30px;
  position: fixed;
  left: calc(50% - 200px);
  top: 12%;
  border-radius: 4px;
  z-index: 999;
  pointer-events: auto;
  cursor: auto;
  visibility: visible;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.6);
}
@media (max-width: 400px) {
  .modal-container #modal-toggle.active ~ .modal-content, .modal-container #modal-toggle:checked ~ .modal-content {
    left: 0;
  }
}
Aqui el codigo en funcionamiento

https://codepen.io/ekrof/pen/yOrPwv

Alguna idea, la idea es hacer todo con css, html y javascript

Necesito que los enlaces dentro del modal se abran en el mismo modal o se abran en otro modal y se cierre el primero.
__________________
Fondos de pantalla
Juegos Gratis
  #2 (permalink)  
Antiguo 04/05/2020, 08:32
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 10.106
Antigüedad: 15 años, 10 meses
Puntos: 2237
Respuesta: Ventana emergente dentro de ventana emergente

Si estás usando javascript para abrir el modal, úsalo también para actualizar el contenido.
__________________
- León, Guanajuato
- GV-Foto
  #3 (permalink)  
Antiguo 04/05/2020, 09:19
 
Fecha de Ingreso: abril-2011
Mensajes: 170
Antigüedad: 13 años, 2 meses
Puntos: 68
Respuesta: Ventana emergente dentro de ventana emergente

Cita:
Necesito que los enlaces dentro del modal se abran en el mismo modal o se abran en otro modal y se cierre el primero.
Para mostrar un modal al hacer click a un elemento, debes añadir a dicho elemento el atributo data-toggle="modal", y href="#ID_DEL_MODAL" (en caso de enlaces) o data-target="#ID_DEL_MODAL" (en caso de botones).

Si al hacer click quieres que se cierre el modal anterior debes añadir data-dismiss="modal". Si quieres que se superponga al modal anterior simplemente no lo añadas.

Evidentemente, para que funcione todo esto necesitas añadir a tu código fuente el script bootstrap.min.js. Algunos ejemplos:

https://www.w3schools.com/code/tryit...e=GEGSW4829O20 (sin superposición)
https://www.w3schools.com/code/tryit...e=GEGSWKCH8P1K (con superposición)

  #4 (permalink)  
Antiguo 04/05/2020, 14:18
 
Fecha de Ingreso: octubre-2009
Ubicación: Santa Fe
Mensajes: 206
Antigüedad: 14 años, 8 meses
Puntos: 7
Respuesta: Ventana emergente dentro de ventana emergente

Muchas gracais por la ayuda

El enlace que me recomendaste prueba230683, es justo lo que buscaba!



Muchas gracias
__________________
Fondos de pantalla
Juegos Gratis

Etiquetas: emergente, modal, popup, ventana
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:51.