Foros aprenderaprogramar.com

Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: cris0710 en 29 de Julio 2021, 19:15

Título: crear ventana modal con código HTML CSS y JavaScript al pulsar botón ejemplo
Publicado por: cris0710 en 29 de Julio 2021, 19:15
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!!!.
Título: Re: informacion sobre libro html
Publicado por: Ogramar 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
Título: Re: crear ventana modal con código HTML CSS y JavaScript al pulsar botón ejemplo
Publicado por: cris0710 en 29 de Julio 2021, 20:38
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