"Modal with Side Nav Bar Panel"
Bootstrap 3.3.0 Snippet by miguelbustamante

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="container"> <div class="row"> <a class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open</a> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h3>Login to MyWebsite.com</h3> </div> <div class="modal-body"> <div class="row"> <div class="col-xs-12"> <!-- tabs --> <div class="tabbable tabs-left"> <ul class="nav nav-tabs"> <li class="tab-img"><img class='img-responsive' src="http://placehold.it/60x60"></li> <li class="active"><a href="#home" data-toggle="tab">Home</a></li> <li><a href="#about" data-toggle="tab">About</a></li> <li><a href="#services" data-toggle="tab">Services</a></li> <li><a href="#contact" data-toggle="tab">Contact</a></li> <li class="tab-img"><img class='img-responsive' src="http://placehold.it/100x100"></li> </ul> <div class="tab-content"> <h3>Nav Tab left Side </h3> <div class="tab-pane active" id="home"> <div class=""> <h1>Home Tab</h1> <p>These lists are meant to identify articles which deserve editor attention because they are the most important for an encyclopedia to have, as determined by the community of participating editors. They may also be of interest to readers as an alternative to lists of overview articles.</p> </div> </div> <div class="tab-pane" id="about"> <div class=""> <h1>About Tab</h1> <p>because they are the most important for an encyclopedia to have, as determined by the community of participating editors. They may also be of interest to readers as an alternative to lists of overview articles.</p> </div> </div> <div class="tab-pane" id="services"> <div class=""> <h1>Services Tab</h1> <p>meant to identify articles which deserve editor attention because they are the most important for an encyclopedia to have, as determined by the community of participating editors. They may also be of interest to readers as an alternative to lists of overview articles.</p> </div> </div> <div class="tab-pane" id="contact"> <div class=""> <h1>Contact Tab</h1> <p>deserve editor attention because they are the most important for an encyclopedia to have, as determined by the community of participating editors. They may also be of interest to readers as an alternative to lists of overview articles.</p> </div> </div> </div> </div> <!-- /tabs --> </div> </div> </div> <div class="modal-footer"> <a href="#" class="btn btn-success prev-step">Atras</a> <a href="#about" class="btn btn-success next-step">Adelante</a> </div> </div> </div </div> </div> </div>
.tabs-left > .nav-tabs { border-bottom: 0; } .tab-content > .tab-pane, .pill-content > .pill-pane { display: none; } .tab-content > .active, .pill-content > .active { display: block; } .tabs-left > .nav-tabs > li { float: none; } .tabs-left > .nav-tabs > li > a { min-width: 74px; margin-right: 0; margin-bottom: 3px; } .tabs-left > .nav-tabs { float: left; margin-right: 19px; border-right: 1px solid #ddd; } .tabs-left > .nav-tabs > li > a { margin-right: -1px; -webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; } .tabs-left > .nav-tabs > li > a:hover, .tabs-left > .nav-tabs > li > a:focus { border-color: #eeeeee #dddddd #eeeeee #eeeeee; } .tabs-left > .nav-tabs .active > a, .tabs-left > .nav-tabs .active > a:hover, .tabs-left > .nav-tabs .active > a:focus { border-color: #ddd transparent #ddd #ddd; *border-right-color: #ffffff; } .modal-header { text-align: center; } .modal-footer { background-color:#F7F7F7; } .tab-img { padding: 10px 50px 10px 50px; }
$(function(){ $('.next-step, .prev-step').on('click', function (e){ var $activeTab = $('.tab-pane.active'); if ( $(e.target).hasClass('next-step') ) { var nextTab = $activeTab.next('.tab-pane').attr('id'); $('[href="#'+ nextTab +'"]').tab('show'); } else { var prevTab = $activeTab.prev('.tab-pane').attr('id'); $('[href="#'+ prevTab +'"]').tab('show'); } }); });

Related: See More


Questions / Comments: