View enlarged image on click

by Brad Patton

HTML

<p style="overflow:auto"><img align="left" alt="" height="197" width="300" border="2" style="float:left;margin:0px 10px" class="popup" src="https://surveygizmolibrary.s3.amazonaws.com/library/90282/NewMedImage1v2.jpg" >Device consists of a (A) bioabsorbable intravascular foot, a (B) collagen-based extravascular plug, connected by a (C) non-absorbable suture and (D) extravascular fluoroscopically visible stainless-steel suture-lock holding the collagen plug in place.</p>

<p style="overflow:auto"><img align="left" alt="" height="197" width="300" border="2" class="popup" src="https://surveygizmolibrary.s3.amazonaws.com/library/90282/NewMedImage2v2.jpg" style="float:left;;margin:0px 10px" >Delivery system features a depth gauge to minimize vessel trauma.</p> 

<p style="overflow:auto"><img align="left" alt="" height="197" width="300" border="2" class="popup" src="https://surveygizmolibrary.s3.amazonaws.com/library/90282/NewMedImage3v2.jpg" style="float:left;;margin:0px 10px">Visual and tactile force feedback to ensure proper delivery system tension.</p>

CSS

.web_dialog_overlay {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
   background: #000000;
   opacity: .15;
   filter: alpha(opacity=15);
   -moz-opacity: .15;
   z-index: 101;
   display: none;
}
.web_dialog {
   display: none;
   position: fixed;
 width: 100%;
  height: 100%;
   top: 10%;
   left: 10%;
  // margin-left: -19px;
   margin-top: -15px;
   background-color: #ffffff;
   border: 2px solid #336699;
   padding: 0px;
   z-index: 102;
   font-family: Verdana;
   font-size: 10pt;
}

JavaScript

$(function() {
$( "body" ).append('<div class="web_dialog_overlay"> </div>');
$( "body" ).append('<div class="web_dialog" id="popup"><img id="popup-image" width="800" height="800" src=""/> </div>');
	$(".popup").click(function (e) {
        var source = $(this).prop('src');
			ShowDialog(source);
	    e.preventDefault();
	});
});

function ShowDialog(source) {
	$("#popup-image").attr('src', source);

	$(".web_dialog_overlay").show();
	$(".web_dialog").fadeIn(300);

	$(".web_dialog_overlay, .web_dialog").click(function (e) {
		$(".web_dialog_overlay").hide();
		$(".web_dialog").fadeOut(300);
	});
}