<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 ----------> <!-- FORKED FROM http://bootsnipp.com/snippets/featured/310-user-profile-in-modal-window --> <!-- NOTES: - fixed span3 to version 3 bootstrap - added 3 employees - added full screen link, and HTML5 validation link - added disclose button to all Modals - removed deprecated <center> tag - fixed modal disclose button, wasn'tworking - fixed validation errors - TODO: sized images to all same size,and square, i.e. don't rely on width tags, or img-responsive class --> <div class="container"> <h2>Sample Modals, with NO css and NO Javascript</h2> <p> <p>Best viewed <a href="http://bootsnipp.com/iframe/qAVPD" target="_blank">full screen</a></p> <!-- Employee #1 --> <div class="col-md-4 well text-center"> <a href="#aboutModal" data-toggle="modal" data-target="#myModal1"> <img src="http://tlazya.net/tlazya/assets/images/team/team1.jpg" alt = "" class="img-circle" width="140" ></a> <h3>Joe Twopack</h3> <em>click my face for more</em> </div> <!-- Employee #2 --> <div class="col-md-4 well text-center"> <a href="#aboutModal" data-toggle="modal" data-target="#myModal2"> <img src="http://tlazya.net/tlazya/assets/images/team/team4.jpg" alt = "" width="140" height="140" class="img-circle"></a> <h3>Joe Fivepack</h3> <em>click my face for more</em> </div> <!-- Employee #3 --> <div class="col-md-4 well text-center"> <a href="#aboutModal" data-toggle="modal" data-target="#myModal3"> <img src="http://tlazya.net/tlazya/assets/images/team/team3.jpg" alt = "" width="140" height="140" class="img-circle"></a> <h3>Joe Sixpack</h3> <em>click my face for more</em> </div> <!-- START Modal popus **************************************** --> <!-- myModal1 --> <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel1">More About Joe</h4> </div> <div class="modal-body text-center"> <img src="http://tlazya.net/tlazya/assets/images/team/team1.jpg" alt = "" width="269" height="269" class="img-circle"> <h3 class="media-heading">Joe Twopack <small>USA</small></h3> <span><strong>Skills: </strong></span> <span class="label label-warning">HTML5/CSS</span> <span class="label label-info">Adobe CS 5.5</span> <span class="label label-info">Microsoft Office</span> <span class="label label-success">Windows XP, Vista, 7</span> <hr> <p class="text-left"><strong>Bio: </strong><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sem dui, tempor sit amet commodo a, vulputate vel tellus.</p> <br> </div> <div class="modal-footer text-center"> <button type="button" class="btn btn-default" data-dismiss="modal">I've heard enough about Joe</button> </div> </div> </div> </div><!-- /myModal1 --> <!-- myModal2 --> <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel2">More About Joe</h4> </div> <div class="modal-body text-center"> <img src="http://tlazya.net/tlazya/assets/images/team/team4.jpg" alt = "" width="269" height="269" class="img-circle"> <h3 class="media-heading">Joe Fivepack <small>USA</small></h3> <span><strong>Skills: </strong></span> <span class="label label-warning">HTML5/CSS</span> <span class="label label-info">Adobe CS 5.5</span> <span class="label label-info">Microsoft Office</span> <span class="label label-success">Windows XP, Vista, 7</span> <hr> <p class="text-left"><strong>Bio: </strong><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sem dui, tempor sit amet commodo a, vulputate vel tellus.</p> <br> </div> <div class="modal-footer text-center"> <button type="button" class="btn btn-default" data-dismiss="modal">I've heard enough about Joe</button> </div> </div> </div> </div><!-- /myModal2 --> <!-- myModal3 --> <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel3">More About Joe</h4> </div> <div class="modal-body text-center"> <img src="http://tlazya.net/tlazya/assets/images/team/team3.jpg" alt = "" width="269" height="269" class="img-circle"> <h3 class="media-heading">Joe Sixpack <small>USA</small></h3> <span><strong>Skills: </strong></span> <span class="label label-warning">HTML5/CSS</span> <span class="label label-info">Adobe CS 5.5</span> <span class="label label-info">Microsoft Office</span> <span class="label label-success">Windows XP, Vista, 7</span> <hr> <p class="text-left"><strong>Bio: </strong><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sem dui, tempor sit amet commodo a, vulputate vel tellus.</p> <br> </div> <div class="modal-footer text-center"> <button type="button" class="btn btn-default" data-dismiss="modal">I've heard enough about Joe</button> </div> </div> </div> </div><!-- /myModal3 --> <!-- END Modal popus **************************************** --> <p> <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2FqAVPD" class="pull-right" target="_blank"> <small>HTML</small>⁵ </a> </p> </div> <!-- /container -->