thickbox表示レイヤ
3388 ワード
JQUERYの練習中にpopwindowとしてthickboxを選択します.しかし、いくつかの問題が見つかりました.
1:レイヤーの座標制御
2:レイヤのmouseoutイベント
問題1:jqueryのoffsetを使用して座標を処理する;表示層を必要とするcssの「z-index」属性がthickbox層の「z-index」属性より大きいことを設定し、このssss DIVがthickboxの外にあってもトップ表示できるようにする.
問題2:javascriptのmouseoutにはいくつかの問題があるようですが、代わりにjqueryのhoverを使用してmouseoutイベントによる問題の代わりに使用することができます.
完全なサンプルコード:
1:レイヤーの座標制御
2:レイヤのmouseoutイベント
問題1:jqueryのoffsetを使用して座標を処理する;表示層を必要とするcssの「z-index」属性がthickbox層の「z-index」属性より大きいことを設定し、このssss DIVがthickboxの外にあってもトップ表示できるようにする.
$('#city2').click(function (e){
var offset = {'top':e.pageY,'left':e.pageX};
$('#ssss').css("position" ,"fixed").css("z-index" ,"200").css("display","block").css(offset);
});
問題2:javascriptのmouseoutにはいくつかの問題があるようですが、代わりにjqueryのhoverを使用してmouseoutイベントによる問題の代わりに使用することができます.
$("#ssss").hover(function(){
$(this).css("display","block");
},function(){
$(this).css("display","none");
});
完全なサンプルコード:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript" src="js/jquery-latest.js"></script>
<script src="js/thickbox-compressed.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />
<script>
jQuery(document).ready(function(){
$('#city2').click(function (e){
var offset = {'top':e.pageY,'left':e.pageX};
$('#ssss').css("position" ,"fixed").css("z-index" ,"200").css("display","block").css(offset);
});
$("#ssss").hover(function(){
$(this).css("display","block");
},function(){
$(this).css("display","none");
});
});
</script>
</head>
<body>
<a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true" class="thickbox">Show hidden modal content.</a>
<div id="hiddenModalContent" style="display:none">
<p> <a> </a> <a id="city2"> </a> </p>
<p style="text-align:center">
<input type="submit" id="Login" value=" Ok " onclick="tb_remove()" />
</p>
</div>
<div id="ssss" style="border: 2px solid #000; padding: 3px; width: 100px; height: 100px; background-color: #980; display:none;">
<ul>
<li>
<input type="checkbox"/>
</li>
<li>
<input type="checkbox"/>
</li>
<li>
<input type="checkbox"/>
</li>
</ul>
</div>
</body>
</html>