<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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"> <h3>Vermeer Modals</h3> <hr> <!-- Thumbnail link for diana and her companion --> <a href="#" data-toggle="modal" data-target=".pop-up-1"> <img src="http://www.essentialvermeer.com/catalogue/image-paintings/diana_and_her_companions.jpg" width="150" class="img-responsive img-rounded center-block" alt=""> </a> <hr> <!-- Thumbnail link for Christ in the House of Martha and Mary --> <a href="#" data-toggle="modal" data-target=".pop-up-2"> <img src="http://www.essentialvermeer.com/catalogue/image-paintings/christ_in_the_house_of_mary_and_martha.jpg" width="150" class="img-responsive img-rounded center-block" alt=""> </a> <hr> <!-- Thumbnail link for The Procuress --> <a href="#" data-toggle="modal" data-target=".pop-up-3"> <img src="http://www.essentialvermeer.com/catalogue/image-paintings/procuress.jpg" width="150" class="img-responsive img-rounded center-block" alt=""> </a> <hr> <!-- Thumbnail link for A Maid Asleep --> <a href="#" data-toggle="modal" data-target=".pop-up-4"> <img src="http://www.essentialvermeer.com/catalogue/image-paintings/maid_asleep.jpg" width="150" class="img-responsive img-rounded center-block" alt=""> </a> <hr> <!-- Thumbnail link for A Girl Reading a Letter by an Open Window --> <a href="#" data-toggle="modal" data-target=".pop-up-5"> <img src="http://www.essentialvermeer.com/catalogue/image-paintings/girl_reading_a_letter_by_an_open_window_.jpg" width="150" class="img-responsive img-rounded center-block" alt=""> </a> <hr> <!-- Thumbnail link for The Little Street --> <a href="#" data-toggle="modal" data-target=".pop-up-6"> <img src="http://www.essentialvermeer.com/catalogue/image-paintings/little_street.jpg" width="150" class="img-responsive img-rounded center-block" alt=""> </a> <hr> <!-- Thumbnail link for Officer and Laughing Girl --> <a href="#" data-toggle="modal" data-target=".pop-up-7"> <img src="http://www.essentialvermeer.com/catalogue/image-paintings/officer_and_laughing_girl.jpg" width="150" class="img-responsive img-rounded center-block" alt=""> </a> <hr> <!-- Thumbnail link for The Milkmaid --> <a href="#" data-toggle="modal" data-target=".pop-up-8"> <img src="http://www.essentialvermeer.com/catalogue/image-paintings/milkmaid.jpg" width="150" class="img-responsive img-rounded center-block" alt=""> </a> <hr> <!-- Thumbnail link for The Glass of Wine --> <a href="#" data-toggle="modal" data-target=".pop-up-9"> <img src="http://www.essentialvermeer.com/catalogue/image-paintings/glass_of_wine.jpg" width="150" class="img-responsive img-rounded center-block" alt=""> </a> <hr> <!-- Thumbnail link for The Girl with a Wineglass --> <a href="#" data-toggle="modal" data-target=".pop-up-10"> <img src="http://www.essentialvermeer.com/catalogue/image-paintings/girl_with_a_wine_glass.jpg" width="150" class="img-responsive img-rounded center-block" alt=""> </a> <hr> <!-- Modal content for Diana and her companions --> <div class="modal fade pop-up-1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel-1" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myLargeModalLabel-1">Diana and her companions</h4> </div> <div class="modal-body"> <img src="http://www.essentialvermeer.com/catalogue/image-paintings/diana_and_her_companions.jpg" class="img-responsive img-rounded center-block" alt=""> <p> <br>c. 1653 - 1656<br> Oil on canvas<br> 98.5 x 105 cm. (38 3/4 x 41 3/8 in.)<br> Mauritshuis, The Hague </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal mixer image --> <!-- Modal content for Christ in the House of Martha and Mary --> <div class="modal fade pop-up-2" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel-2" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myLargeModalLabel-2">Christ in the House of Martha and Mary</h4> </div> <div class="modal-body"> <img src="http://www.essentialvermeer.com/catalogue/image-paintings/christ_in_the_house_of_mary_and_martha.jpg" class="img-responsive img-rounded center-block" alt=""> <p><br>c. 1654 - 1655<br> Oil on canvas<br> 160 x 142 cm. (63 x 55 7/8 in.)<br> National Gallery of Scotland, Edinburgh </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal mixer image --> <!-- Modal content for The Procuress --> <div class="modal fade pop-up-3" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel-1" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myLargeModalLabel-1">The Procuress </h4> </div> <div class="modal-body"> <img src="http://www.essentialvermeer.com/catalogue/image-paintings/procuress.jpg" class="img-responsive img-rounded center-block" alt=""> <p> <br>1656<br> Oil on canvas<br> 143 x 130 cm. (56 1/8 x 51 1/8 in.)<br> Gemäldegalerie Alte Meister (Old Masters Picture Gallery), Dresden </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal mixer image --> <!-- Modal content for A Maid Asleep --> <div class="modal fade pop-up-4" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel-1" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myLargeModalLabel-1">A Maid Asleep </h4> </div> <div class="modal-body"> <img src="http://www.essentialvermeer.com/catalogue/image-paintings/maid_asleep.jpg" class="img-responsive img-rounded center-block" alt=""> <p> <br>c. 1657<br> Oil on canvas<br> 87.6 x 76.5 cm. (34 1/2 x 30 1/8 in.)<br> Metropolitan Museum of Art, New York </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal mixer image --> <!-- Modal content for A Girl Reading a Letter by an Open Window --> <div class="modal fade pop-up-5" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel-1" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myLargeModalLabel-1">A Girl Reading a Letter by an Open Window</h4> </div> <div class="modal-body"> <img src="http://www.essentialvermeer.com/catalogue/image-paintings/girl_reading_a_letter_by_an_open_window_.jpg" class="img-responsive img-rounded center-block" alt=""> <p> <br>c. 1657 - 1659<br> Oil on canvas<br> 83 x 64.5 cm. (32 3/4 x 25 3/8 in.)<br> Gemäldegalerie Alte Meister (Old Masters Picture Gallery), Dresden </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal mixer image --> <!-- Modal content for The Little Street --> <div class="modal fade pop-up-6" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel-1" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myLargeModalLabel-1">The Little Street</h4> </div> <div class="modal-body"> <img src="http://www.essentialvermeer.com/catalogue/image-paintings/little_street.jpg" class="img-responsive img-rounded center-block" alt=""> <p> <br>c. 1657 - 1661<br> Oil on canvas<br> 54.3 x 44 cm. (21 3/8 x 17 3/8 in.)<br> Rijksmuseum, Amsterdam </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal mixer image --> <!-- Modal content for Officer and Laughing Girl --> <div class="modal fade pop-up-7" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel-1" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myLargeModalLabel-1">Officer and Laughing Girl</h4> </div> <div class="modal-body"> <img src="http://www.essentialvermeer.com/catalogue/image-paintings/officer_and_laughing_girl.jpg" class="img-responsive img-rounded center-block" alt=""> <p> <br>c. 1655-1660<br> Oil on canvas<br> 50.5 x 46 cm. (19 7/8 x 18 1/8 in.)<br> Frick Collection, New York </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal mixer image --> <!-- Modal content for The Milkmaid --> <div class="modal fade pop-up-8" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel-1" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myLargeModalLabel-1">The Milkmaid</h4> </div> <div class="modal-body"> <img src="http://www.essentialvermeer.com/catalogue/image-paintings/milkmaid.jpg" class="img-responsive img-rounded center-block" alt=""> <p> <br>c. 1658-1661<br> Oil on canvas<br> 17 7/8 x 16 1/8 in. (45.5 x 41 cm.)<br> The Rijksmuseum, Amsterdam </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal mixer image --> <!-- Modal content for The Glass of Wine --> <div class="modal fade pop-up-9" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel-1" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myLargeModalLabel-1">The Glass of Wine</h4> </div> <div class="modal-body"> <img src="http://www.essentialvermeer.com/catalogue/image-paintings/glass_of_wine.jpg" class="img-responsive img-rounded center-block" alt=""> <p> <br>c. 1658-1660<br> Oil on canvas<br> 65 x 77 cm. (25 5/8 x 30 1/4 in.)<br> Staatliche Museen Preußischer Kulturbesitz, Gemäldegalerie, Berlin </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal mixer image --> <!-- Modal content for The Girl with a Wineglass --> <div class="modal fade pop-up-10" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel-1" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myLargeModalLabel-1">The Girl with a Wineglass</h4> </div> <div class="modal-body"> <img src="http://www.essentialvermeer.com/catalogue/image-paintings/girl_with_a_wine_glass.jpg" class="img-responsive img-rounded center-block" alt=""> <p> <br>c. 1659-1660<br> Oil on canvas<br> 78 x 67 cm. (30 3/4 x 26 3/8 in.)<br> Herzog Anton Ulrich-Museum, Braunschweig (Brunswick) </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal mixer image --> </div> <!-- /.row --> </div> <!-- /.container -->