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">×</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>