<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Modal --> <div class="modal fade alert-modal in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content "> <table class="table"> <thead> <tr> <th> Hola :) ! <img id="mini-logo" src="http://placehold.it/115x27" class="pull-right" width="100" height="auto"> </th> </tr> </thead> <tbody> <tr> <td> <h4 class="purple-text"> Gracias por visitar oursite.com! </h4> <p> <img src="http://placehold.it/60x51" class="icon pull-right"> Puedes responder alguna preguntas?<br/> Tu opinión es importante para nosotros </p> <button type="submit" class="btn btn-lg green-bg">SI</button> <button type="submit" class="btn btn-lg green-bg" data-dismiss="modal">NO</button> </td> </tr> </tbody> </table> </div> </div> </div>

.alert-modal .modal-content{ border-radius: 0px; -webkit-radius: 0px; -moz-radius: 0px; -o-radius: 0px; } .alert-modal th{ background-color: #7770a3; color: #fff; border: 0!important; font-size: 18px; } .alert-modal td{ border: 0!important; } .alert-modal .green-bg{ border-radius: 0!important; } .alert-modal .modal-dialog.modal-sm{ width: 350px!important; } .alert-modal .modal-content table{ margin-bottom: 0!important; } .alert-modal .modal-content .icon{ margin-left: 10px; } .alert-modal .modal-content h4{ font-size: 23px; } .alert-modal #mini-logo{ margin-right: 13px; }

$('#myModal').modal('show')