前提・実現したいこと
JQueryでモーダルウィンドウ実装
わからない部分
オーバーレイヤーの部分で、$("+dd",this)
という表現がよくわからないです。
※+ddが、クリックされたdt要素の次に出現するdd要素を隣接セレクタを使って取得、html()で追加、までは理解しました。,thisはどう解釈したらよいのでしょうか?
該当のソースコード
$("#overLayer").show().html($("+dd",this).html()).css({
marginTop:"-"+$("#overLayer").height()/2+"px" ,
marginLeft:"-"+$("#overLayer").width()/2+"px"
});
====================================HTML
<dl> <dt>スタート</dt> <dd>ああああああああ<img src="#" style="margin-left:70px;"></dd> </dl> わちゃわちゃしててみづらいですが、 構造は、dlの中にdtとddがあって、dtを押すとddがグレイレイヤーとオーバーレイヤーとともに出てきます。$(function(){ $("dd").hide() $("body").append("<div id='glayLayer'></div><div id='overLayer'></div>"); $("#glayLayer").click(function(){ $(this).hide(); $("#overLayer").hide(); }); $("dt").click(function(){ $("#glayLayer").show() $("#overLayer").show().html($("+dd",this).html()).css({ marginTop:"-"+$("#overLayer").height()/2+"px" , marginLeft:"-"+$("#overLayer").width()/2+"px" }); return false; }); if($.browser.msie && $.browser.version<7){ $(window).scroll(function(){ $("#glayLayer").get(0).style.setExpression("top","$(document).scrollTop()+'px'"); $("#overLayer").get(0).style.setExpression("top","($(document).scrollTop()+$(window).height()/2)+'px'"); }); } });