189 8069 5689
JQuery实现将Div浮动到网页最上层。
创新互联建站专业为企业提供尚志网站建设、尚志做网站、尚志网站设计、尚志网站制作等企业网站建设、网页设计与制作、尚志企业网站模板建站服务，十多年尚志做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
可以通过Css的z-index属性来进行设置
具体代码：
$(".divClass").attr("z-index",999);
原理：
通过JQuery给指定的div增加属性'z-index'为'999'，将指定div的层次拉到最高，这个所谓的999并不一定是999这个数字，只需要是你页面z-index的最大值就是可以的。
首先随便找一个地方新建一个div 并且隐藏。例如
div id='showTip' style="background-color: white; width:200px; height:200px;position: absolute; display: none; "
/div
然后在链接那边写个onmouseover 属性加个触发方法 如showDiv()具体方法如下
function showDiv(e){
$("#showTip").html("这里可以写一些html的内容，如图片文字");
$("#showTip").css("top",e.clientY);//这里可以根据情况适当调整
$("#showTip").css("left",e.clientX);
$("#showTip").show();
}
还要在链接那边加上 onmouseout属性触发方法如下:
function hideDiv(){
$("#showTip").hide();
}
以上需要引入jquery支持
capacityFixed是jquery插件，是消息定位提示框。
当浏览器滚动的时候，要浮层要移除浏览器界面视区的时候，修改其position属性，让其浮动在窗口的上沿显示。
head runat="server"
titletest/title
script type="text/javascript" src="jquery/jquery-1.2.6.js" /script
style type="text/css"
.pop-box {
z-index: 9999; /*这个数值要足够大，才能够显示在最上层*/
margin-bottom: 3px;
display: none;
position: absolute;
background: #FFF;
border:solid 1px #6e8bde;
}
.pop-box h4 {
color: #FFF;
cursor:default;
height: 18px;
font-size: 14px;
font-weight:bold;
text-align: left;
padding-left: 8px;
padding-top: 4px;
padding-bottom: 2px;
background: url("../images/header_bg.gif") repeat-x 0 0;
}
.pop-box-body {
clear: both;
margin: 4px;
padding: 2px;
}
.mask {
color:#C7EDCC;
background-color:#C7EDCC;
position:absolute;
top:0px;
left:0px;
filter: Alpha(Opacity=60);
}
/style
script language=javascript type="text/javascript"
function popupDiv(div_id) {
var div_obj = $("#"+div_id);
var windowWidth = document.body.clientWidth;
var windowHeight = document.body.clientHeight;
var popupHeight = div_obj.height();
var popupWidth = div_obj.width();
//添加并显示遮罩层
$("div id='mask'/div").addClass("mask")
.width(windowWidth + document.body.scrollWidth)
.height(windowHeight + document.body.scrollHeight)
.click(function() {hideDiv(div_id); })
.appendTo("body")
.fadeIn(200);
div_obj.css({"position": "absolute"})
.animate({left: windowWidth/2-popupWidth/2,
top: windowHeight/2-popupHeight/2, opacity: "show" }, "slow");
}
function hideDiv(div_id) {
$("#mask").remove();
$("#" + div_id).animate({left: 0, top: 0, opacity: "hide" }, "slow");
}
/script
/head
body
form id="form1" runat="server"
div id='pop-div' style="width: 300px;" class="pop-box"
h4标题位置/h4
div class="pop-box-body"
p
正文内容
/p
input id=btnClose type=button onclick="hideDiv('pop-div');" value="关闭"/
/div
/div
input type=button id=btnTest value='test' onclick="popupDiv('pop-div');"/
/form
/body