Skip to main content
Ejemplo con atributo "show" y sin él
Origen Enlace
OscarGarcia
  • 28.5k
  • 3
  • 29
  • 64

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('show');
});
/* 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>

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 de la siguiente manera:

/* Desde javascript */
$(function() {
  $('#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>

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>

Atributo "show" en la propia etiqueta HTML
Origen Enlace
OscarGarcia
  • 28.5k
  • 3
  • 29
  • 64

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 de la siguiente manera:

/* Desde javascript */
$(function() {
  $('#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">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>

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 de la siguiente manera:

$(function() {
  $('#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 -->
  <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">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>

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 de la siguiente manera:

/* Desde javascript */
$(function() {
  $('#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>

Referencia perdida a la otra respuesta
Origen Enlace
OscarGarcia
  • 28.5k
  • 3
  • 29
  • 64

BasándomeTal 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 elsu lugar ejemplo de @Einer bastalos Modals de bootstrap.

Basta con llamar a .modal("show") para activar la opción show cuando cargue la página de la siguiente manera:

$(function() {
  $('#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 -->
  <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">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>

Basándome en el ejemplo de @Einer basta con llamar a .modal("show") para activar la opción show cuando cargue la página de la siguiente manera:

$(function() {
  $('#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 -->
  <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">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>

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 de la siguiente manera:

$(function() {
  $('#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 -->
  <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">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>

Origen Enlace
OscarGarcia
  • 28.5k
  • 3
  • 29
  • 64
Loading