[jquery]超簡易なインライン要素のモーダルウィンドウ
せっかく作ったので一応載せておこう。
汎用性は…おそらく…ない…でしょう。^▽^;
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(); }); });