当前位置：首页 → 问答吧 → jQuery浮动层取值问题

jQuery浮动层取值问题

时间：2009-07-31

来源：互联网

复制代码

<script type="text/javascript">
/* ================================================================
This copyright notice must be untouched at all times.
Copyright (c) 2008 Stu Nicholls - stunicholls.com - all rights reserved.
=================================================================== */
/* <![CDATA[ */
$(document).ready(function(){
$('.hide').hide();
$('body').append('<div id="infoBacking"></div><div id="infoHolder" class="large"></div>');
$('#infoBacking').css({position:'absolute', left:0, top:0, display:'none', textAlign:'center', background:'#000', zIndex:'600'});
$('#infoHolder').css({left:0, top:0, display:'none', textAlign:'center', zIndex:'600', position:'fixed'});
if($.browser.msie){$('#infoHolder').css({position:'absolute'});}
//$('.more').mouseover(function() {$(this).css({textDecoration:'none'});} );
//$('.more').mouseout(function() {$(this).css({textDecoration:'underline'});} );
$('.more').click(function(){
if ($('.' + $(this).attr("title")).length > 0) {
browserWindow()
getScrollXY()
if (height<totalY) { height=totalY; }
$('#infoBacking').css({width: totalX + 'px', height: height + 'px', top:'0px', left:scrOfX + 'px', opacity:0.85});
$('#infoHolder').css({width: width + 'px', top:scrOfY + 25 + 'px', left:scrOfX + 'px'});
source = $(this).attr("title");
$('#infoHolder').html('<div id="info">' + $('.' + source).html() + '<p class="clear"><span class="close">关闭</span></p></div>');
$('#infoBacking').css({display:'block'});
$('#infoHolder').show();
$('#info').fadeIn('slow');
}
$('.close').click(function(){
$('#infoBacking').hide();
$('#infoHolder').fadeOut('fast');
});
});
/* find browser window size */
function browserWindow () {
width = 0
height = 0;
if (document.documentElement) {
width = document.documentElement.offsetWidth;
height = document.documentElement.offsetHeight;
} else if (window.innerWidth && window.innerHeight) {
width = window.innerWidth;
height = window.innerHeight;
}
return [width, height];
}
/* find total page height */
function getScrollXY() {
scrOfX = 0;
scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
scrOfY = window.pageYOffset;
scrOfX = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
scrOfY = document.body.scrollTop;
scrOfX = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
scrOfY = document.documentElement.scrollTop;
scrOfX = document.documentElement.scrollLeft;
}
totalY = (window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null ? document.body.clientHeight : null);
totalX = (window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null);
return [ scrOfX, scrOfY, totalY, totalX ];
}
return false;
}
);
/* ]]> */
</script>

我用这段代码来实现浮动,浮动的页面是:

复制代码

<div class="page11 hide ">
<div id="page">
<div class="page1">
<div class="centert">
<div class="rt"><img src="images/on.jpg" width="10" height="10" /></div>
</div>
<div class="center0"><span class="a2">莆田迷</span>，请填写以下资料：<br />
以下资料不对外公开！便于申请联系。</div>
<div class="center">
<table width="480" border="0" align="center" cellspacing="0">
<tr>
<td width="20%" align="right" class="a">申请人姓名：</td>
<td width="77%"><input name="applyname" type="text" value="11" size="36" id="applyname"/> </td>
</tr>
<tr>
<td align="right" class="a">电话号码：</td>
<td><input name="applynum" type="text" size="36" id="applynum" value="22" /></td>
</tr>
<tr>
<td align="right"><span class="a"> 手机号码：</span></td>
<td><input name="applytel" type="text" value="" size="36" id="applytel"/></td>
</tr>
<tr>
<td colspan="2"><div class="a3">以下资料对外公开！</div></td>
</tr>
<tr>
<td align="right" valign="top" class="a">商家名称：</td>
<td><input name="shopname" type="text" value="" size="36" id="shopname"/></td>
</tr>
<tr>
<td align="right">联系电话：</td>
<td class="b"><input name="shopnum" type="text" value="" size="36" id="shopnum"/></td>
</tr>
<tr>
<td align="right">QQ号码：</td>
<td><input name="qq" type="text" value="" size="20" id="qq"/></td>
</tr>
<tr>
<td align="right">详细地址：</td>
<td><input name="shopaddr" type="text" value="" size="36" id="shopaddr" /></td>
</tr>
<tr>
<td align="right" valign="top">商家简介：</td>
<td><span class="b">
<textarea name="shopintro" cols="38" rows="5" id="shopintro"></textarea>
</span></td>
</tr>
<tr>
<td align="right" valign="top">商家活动：</td>
<td><span class="b">
<textarea name="shopactive" cols="38" rows="5" id="shopactive"></textarea>
</span></td>
</tr>
<tr>
<td align="right" valign="top">商家LOGO：</td>
<td><span class="b">
<input type="file" name="shopimageaddr" id="shopimageaddr" id="shopimageaddr"/>
</span></td>
</tr>
<tr>
<td> </td>
<td><input name="Submit" type="button" id="input1" value="提交" onclick="save()" /></td>
</tr>
</table>
</div>
</div>
</div>
</div>