Cómo mostrar ventana emergente de forma automática usando modal bootstrap de Twitter

Hola Amigos 🙂

Hoy les dejo algo genial que puede ser de mucha utilidad en sus proyectos web.

Mostrar una ventana emergente (Pop-up) de forma automática al acceder a una página web utilizando modal bootstrap de Twitter.

Las ventanas emergentes o popup son recursos muy utilizados en los ecommerce para mostrar sus promociones, productos destacados o simplemente solicitando que registres tu email para recibir las novedades en bandeja.

Las ventanas modales de Twitter Bootstrap se crean usando un plugin de jQuery personalizado. Se puede usar para crear ventanas emergentes  para enriquecer la experiencia del usuario o para añadir funcionalidad a los usuarios.

modal-bootstrap
Como disponer de ventanas modales de Twitter Bootstrap Modals.
En nuestro <head> añadimos los estilos de Bootstrap,  la biblioteca bootstrap.js y jQuery.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

En nuestro <body> añadimos el modal

<div class="modal fade" id="mostrarmodal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
	    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h3>Cabecera de la ventana</h3>
	 </div>
         <div class="modal-body">
            <h4>Texto de la ventana</h4>
            Mas texto en la ventana.    
	 </div>
         <div class="modal-footer">
	    <a href="#" data-dismiss="modal" class="btn btn-danger">Cerrar</a>
	 </div>
      </div>
   </div>
</div>

Por ultimo agregamos el <script> que hará que la ventana se ejecute automáticamente y sea visible para el usuario al abrir la página web.

<script>
   $(document).ready(function()
   {
      $("#mostrarmodal").modal("show");
   });
</script>

Acá el código completo 😀

<html>
<head>
   <meta charset="utf-8">
   <title>Mostrar Ventane Modal de forma Automático</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
   <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
   <script>
      $(document).ready(function()
      {
         $("#mostrarmodal").modal("show");
      });
    </script>
</head>
<body>
   <div class="modal fade" id="mostrarmodal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
           <div class="modal-header">
	      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h3>Cabecera de la ventana</h3>
           </div>
           <div class="modal-body">
              <h4>Texto de la ventana</h4>
              Mas texto en la ventana.    
	   </div>
           <div class="modal-footer">
	      <a href="#" data-dismiss="modal" class="btn btn-danger">Cerrar</a>
           </div>
      </div>
   </div>
</div>
</body>
</html>

Sus dudas dejen en los comentarios! Hasta la próxima 🙂