<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-3 well text-center">
<a href="#aboutModal" data-toggle="modal" data-target="#myModal1">
<img src="http://tlazya.net/tlazya/assets/images/team/team2.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-3 well text-center">
<a href="#aboutModal" data-toggle="modal" data-target="#myModal2">
<img src="http://tlazya.net/tlazya/assets/images/team/team5.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-3 well text-center">
<a href="#aboutModal" data-toggle="modal" data-target="#myModal3">
<img src="http://tlazya.net/tlazya/assets/images/team/team6.jpg" alt = "" width="140" height="140" class="img-circle"></a>
<h3>Joe Sixack</h3>
<em>click my face for more</em>
</div>
<!-- Employee #4 -->
<div class="col-md-3 well text-center">
<a href="#aboutModal" data-toggle="modal" data-target="#myModal4">
<img src="http://tlazya.net/tlazya/assets/images/team/team8.jpg" alt = "" width="140" height="140" class="img-circle"></a>
<h3>Joe Eightack</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/team2.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/team5.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/team6.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 -->
<!-- myModal4 -->
<div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel4" 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/team8.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><!-- /myModal4 -->
<!-- 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><sup>5</sup>
</a>
</p>
</div> <!-- /container -->
