0

tengo un popup modal que carga al hacer click en un boton, pero no me sirve, tiene que cargar automaticamente al entrar en la web que lo ponga, como tiene que hacer, proble poniendo la funcion adentro del y nada, probe haciendo una funcion que de autoclick al boton, y tampoco, por eso recurro a ustedes, que necesito para poder hacer lo dicho?

Les dejo una base:
Es un codigo de w3schools, pero bueno, me sirve para usarlo como una base muy basica. ...

<!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 {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

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

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
</style>
</head>
<body>

<h2>Modal Example</h2>

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

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

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </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>
3
  • Estimado, ocupas bootstrap 3, 4, o algun otro? ocupas JQuery? De ser así solo con invocar propiedades de la libreria te debería cargar sin problemas con una simple linea de código
    – harifo
    Commented el 22 may. 2019 a las 20:43
  • Ninguna, no cargué ninguna librería, las que probé de otros blogs no me funcionaron, aquí pegué la base que no tiene ninguna libreria
    – MatiST00
    Commented el 22 may. 2019 a las 20:45
  • En el caso que te decidas ocupar librerias y hacer la pega mas fácil te recomiendo descargarlas de las web's oficiales. getbootstrap.com/docs/4.0/getting-started/download y jquery.com/download, luego en tu codigo, dentro de window.onload coloca $('#miModal').show();
    – harifo
    Commented el 22 may. 2019 a las 20:59

1 respuesta 1

1

Tienes varias opciones, una seria cambiar el display a block en lugar de none por default. Otra seria cambiandolo en javascript. Te dejo un ejemplo en javascript.

<!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 {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

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

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
</style>
</head>
<body>

<h2>Modal Example</h2>

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

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

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>Some text in the Modal..</p>
  </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 
modal.style.display = "block";
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>

3
  • Si el script lo pongo arriba de los divs del modal no funciona, osea no carga al entrar a la web, y si está abajo, no lo puedo cerrar
    – MatiST00
    Commented el 22 may. 2019 a las 20:58
  • Como ves aqui funciona correctamente. Quizas sea mejor cambiar el display a block en css.
    – alanfcm
    Commented el 22 may. 2019 a las 20:59
  • 1
    @MatiST00 ten cuidado con el vocabulario por favor. voy a eliminar tu comentario.
    – gbianchi
    Commented el 23 may. 2019 a las 1:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.