在thickbox显示层

最新推荐文章于 2019-10-03 11:46:43 发布

最新推荐文章于 2019-10-03 11:46:43 发布 · 142 阅读

文章标签：

#CSS #jQuery #JavaScript #XHTML #HTML #ViewUI

jquery 专栏收录该内容

7 篇文章

订阅专栏

在练习JQUERY的时候选择thickbox作为popwindow;但是发现几个问题：
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>