diff --git a/demo_with_modal.html b/demo_with_modal.html
new file mode 100644
index 0000000..2826c8c
--- /dev/null
+++ b/demo_with_modal.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset='utf-8'/>
+	<title>jQuery elevateZoom Demo</title>
+	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.8.1/semantic.min.css">
+	<script src='jquery-1.8.3.min.js'></script>
+	<script src='jquery.elevatezoom.js'></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.8.1/semantic.min.js"></script>
+</head>
+<body>
+<h1>Basic Zoom Example</h1>
+<button>Launch Moal</button>
+<div class="ui modal" id="zoom_modal">
+	<img id="zoom_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>
+
+	<br />
+	see more examples online <a href="http://www.elevateweb.co.uk/image-zoom/examples">http://www.elevateweb.co.uk/image-zoom/examples</a>
+</div>
+<script>
+	$("button").click(function(){
+		$(".ui.modal")
+			.modal({
+				onShow: function() {
+					$('#zoom_01').elevateZoom({
+				    	z_index: 1004 //semantic-ui default modal's z-index is 1001
+				    });
+				},
+				onHide: function() {
+					//destroy or remove elevateZoom object here.
+					$(".zoomContainer").remove();
+				}
+			})
+			.modal('show');
+	});
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/jquery.elevatezoom.js b/jquery.elevatezoom.js
index 6d1f3ae..40335e7 100755
--- a/jquery.elevatezoom.js
+++ b/jquery.elevatezoom.js
@@ -62,8 +62,6 @@ if ( typeof Object.create !== 'function' ) {
 
 				self.refresh( 1 );
 
-
-
 				//Create the image swap from the gallery 
 				$('#'+self.options.gallery + ' a').click( function(e) { 
 
@@ -257,7 +255,7 @@ if ( typeof Object.create !== 'function' ) {
 				//create the div's                                                + ""
 				//self.zoomContainer = $('<div/>').addClass('zoomContainer').css({"position":"relative", "height":self.nzHeight, "width":self.nzWidth});
 
-				self.zoomContainer = $('<div class="zoomContainer" style="-webkit-transform: translateZ(0);position:absolute;left:'+self.nzOffset.left+'px;top:'+self.nzOffset.top+'px;height:'+self.nzHeight+'px;width:'+self.nzWidth+'px;"></div>');
+				self.zoomContainer = $('<div class="zoomContainer" style="-webkit-transform: translateZ(0);position:absolute;left:'+self.nzOffset.left+'px;top:'+self.nzOffset.top+'px;height:'+self.nzHeight+'px;width:'+self.nzWidth+'px;z-index:'+self.options.z_index+'"></div>');
 				$('body').append(self.zoomContainer);	
 
 
@@ -1771,7 +1769,8 @@ if ( typeof Object.create !== 'function' ) {
 			onComplete: $.noop,
 			onZoomedImageLoaded: function() {},
 			onImageSwap: $.noop,
-			onImageSwapComplete: $.noop
+			onImageSwapComplete: $.noop,
+			z_index: 999
 	};
 
 })( jQuery, window, document );
\ No newline at end of file
