2

Necesito hacer una alerta que me arroje como resultado una imagen.

O mejor dicho, que al ingresar al index de la página, inmediatamente me aparezca un recuadro (como una alerta) con una imagen y que la persona pueda darle Aceptar o X y lo saque de ese recuadro y lo deje en el index para ingresar a la sesión.

El código que tengo es el siguiente, no sé si esté bien.

<script>alert("img/imagen.jpg")</script>
2
  • 2
    En JS los dialogos de alert estan definidos y no se pueden modificar pero puedes crear tu uno modal propio. Investiga como hacerlo y si en el proceso tienes problemas concretos o errores pregunta aqui. Una de las respuestas de la pregunta enlazada contiene un ejemplo. Un saludo
    – lois6b
    el 5 sep. 2017 a las 14:10
  • No puede mostrar una imagen dentro del cuadro de alerta nativa de JavaScript.
    – zerokira
    el 5 sep. 2017 a las 14:11

4 respuestas 4

3

Los dialogos alert y confirm solo pueden mostrar textos. Utiliza un plugin de jquery como jquery Dialog o las modales de bootstrap:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  <div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
         <img    style="width:150px" src="http://www.visitmt.com/binaries/medium/content/gallery/MTOT/responsive/hero-f/moose-calf_web.jpg" />
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
   <a class="btn btn-primary" href="index.php">Ir index</a>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

2
  • Acá el problema sería que tocaría darle a un botón, la idea es que aparezca por si solo cuando ingrese al index.
    – ceortiz27
    el 5 sep. 2017 a las 14:17
  • Simplemente tendrias que agregarle otro boton que seria un link con la ruta de tu pagina index. Mira la respuesta actualizada con el ejemplo.
    – Einer
    el 5 sep. 2017 a las 14:20
2

Tal y como @lois6b te ha comentado, los estilos y contenido de las ventanas emergentes alert() están predefinidos y no se pueden cambiar.

Puedes usar en su lugar los Modals de bootstrap.

Basta con llamar a .modal("show") para activar la opción show cuando cargue la página o bien configurar el atributo data-show y llamar a .model() sin parámetros de la siguiente manera:

/* Desde javascript haciendo uso de "data-show" */
$(function() {
  $('#myModal').modal();
});
/* Desde javascript forzando su visualización */
/*$('#myModal').modal('show');*/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Ejemplo</h2>
  <!-- Modal usando el atributo data-show="true" -->
  <div class="modal fade" id="myModal" role="dialog" data-show="true">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Mensaje de advertencia
            <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
          </h4>
        </div>
        <div class="modal-body">
          <img src="http://www.visitmt.com/binaries/medium/content/gallery/MTOT/responsive/hero-f/moose-calf_web.jpg" width="100%" />
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
        </div>
      </div>
    </div>
  </div>
</div>

2

Usando jqueryUI, Muestra botón para cerrar el popup y se abrirá solo al ingresar a la pagina:

HTML

<div id="alerta" title="Mensaje de Alerta" style="display:none"><img src="img/imagen.jpg"></div>

JS

$('#alerta').dialog();

Si no tienes jqueryui, agrega esto en el head:

<head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
</head>

opcional,Puedes personalizarlo, ejem:

$( "#alerta" ).dialog({
  show: {
    effect: "blind",
    duration: 1000
  },
  hide: {
    effect: "explode",
    duration: 1000
  }
});

Esta es la pagina oficial para mas opciones: https://jqueryui.com/dialog/

1

Puedes usar también Dialog de jQuery.

Este sería el estilo Modal Message. Es el código que presentan ellos en su página:

  $( function() {
    $( "#dialog-message" ).dialog({
      modal: true,
      buttons: {
        Ok: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  } );
<head>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Modal message</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  </script>
</head>
<body>
 
<div id="dialog-message" title="Download complete">
  <p>
    <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
    Your files have downloaded successfully into the My Downloads folder.
  </p>
  <p>
    Currently using <b>36% of your storage space</b>.
  </p>
</div>
 
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
</body> 
 

Si observas a la derecha de la página de jQuery Dialog, verás que hay otras posibilidades de implementación.

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.