Autor Tema: crear ventana modal con código HTML CSS y JavaScript al pulsar botón ejemplo  (Leído 396 veces)

cris0710

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 17
    • Ver Perfil
Hola estoy haciendo una página web de una librería para una práctica y ya tengo el catálogo de libros y todo pero no sé cómo hacer una ventana modal que al presionar en un libro del catálogo te abra una ventanita en la cual te aparezca una imagen del libro y a lado mas informacion sobre el libro, espero y me puedan ayudar.

Si necesitan que envie tambien parte de lo que ya llevo hecho para darse una idea lo envio gracias!!!.
« Última modificación: 29 de Julio 2021, 19:58 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2635
    • Ver Perfil
Re: informacion sobre libro html
« Respuesta #1 en: 29 de Julio 2021, 19:57 »
Buenas cris0710, siempre es bueno que subas código y poner un título a los temas adecuado (ver lo que se indica en https://aprenderaprogramar.com/foros/index.php?topic=1460.0) En lugar de un título como "informacion sobre libro html" es más adecuado "crear ventana modal con código HTML CSS y JavaScript al pulsar botón"

Aparentemente lo que quieres hacer se puede hacer con JavaScript y CSS

Curso de JavaScript: https://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206
Curso de CSS: https://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203

Habría muchas formas de hacerlo, aparte de librerías que te lo pueden facilitar a partir de funciones propias.

He descargado este código que te puede servir como ejemplo:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}
</style>
</head>
<body>

<h2>Ventana modal animada con cabecera y pie</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Abrir ventana modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>Cabecera de la ventana modal</h2>
    </div>
    <div class="modal-body">
      <p>Algo de texto en el cuerpo de la ventana modal</p>
      <p>Más texto que quieras poner...</p>
<img src="https://aprenderaprogramar.com/images/thumbs_portada/thumbs_conocenos/75_el_garaje.jpg"/>
      <p>Más texto que quieras poner...</p>
    </div>
    <div class="modal-footer">
      <h3>Pie de la ventana modal</h3>
    </div>
  </div>

</div>

<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

</body>
</html>

Salu2

cris0710

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 17
    • Ver Perfil
Muchas gracias por tu consejo y por el ejemplo solo me gustaria saber si hay alguna forma de que al presionar la imagen del libro se ejecutara la ventana modal lo eh tratado de hacer de varias formas pero solo funciona colocando un boton

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".