@caramu

せっかく作ったので一応載せておこう。
汎用性は…おそらく…ない…でしょう。＾▽＾；
IDとかclass割り振りとかそこまで組むのがいやだったので単純にnextで処理かけています。
なのでsampleブロックを複製すれば複数のモーダルが設置できます。

HTML

   <div class="sample">
    <a href="#" class="inline"><img src="sample.jpg"></a>
    <div class="modal-inline">
     <div class="modal-cont">
      <p><img src="sample_l.jpg"></p>
      <p>ここにテキスト</p>
     </div><!--//modal-cont-->
    </div><!--//modal-inline-->
   </div><!--//sample-->

   <div class="sample">
    <a href="#" class="inline"><img src="sample.jpg"></a>
    <div class="modal-inline">
     <div class="modal-cont">
      <p><img src="sample_l.jpg"></p>
      <p>ここにテキスト</p>
     </div><!--//modal-cont-->
    </div><!--//modal-inline-->
   </div><!--//sample-->

ぶっちゃけ、modal-inlineのdivはいらないっていう　＾＾；

CSS

.modal-cont {
	width: 50%;
	height:50%;
	margin: 0;
	background:#fff;
	position: fixed;
	z-index: 999;
	top:50%;
	left:50%;
	margin-left:-50%;
	margin-top:-50%;
	text-align:center;
	border-radius:30px;
}

.overlay {
	display: block;
	position: fixed;
	top: 0 ;
	left: 0 ;
	cursor:pointer;
	width: 100% ;
	height: 100%;
	min-height:100%;
	background: rgba( 0,0,0, 0.75 ) ;
	zoom:1;
	z-index: 300;
	}

JS

jQuery(function($){
	$(".inline").on('click', function() {
		$("body").css("overflow","hidden");
		$(this).next().fadeIn("fast");
		$(".modal-cont").before("<div class=overlay></div>");
	});
	
	$(document).on("click",".overlay ", function() {
		$("body").css("overflow","visible");
		$(".modal").fadeOut("fast");
		$(".overlay").remove();
	});
  });