如何设置div显示最顶层 15
2个回答
2012-07-26 · 知道合伙人互联网行家
关注
展开全部
这个是要点击的那个文字或是图片代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/thickbox_plus.js"></script>
<link rel="stylesheet" type="text/css" href="css/thickbox.css"/>
</head>
<body>
<a href="ShowLogin.html?height=160;width=400" title="应聘该职位并投递简历" class="thickbox" >马上应聘该职位</a>
</body>
</html>
这个就是弹出的那层的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
*{margin:0px;border:0px;padding:0px;}
body{font:12px "宋体";}
a{color:#000;text-decoration:none;}
a:hover{color:#F30;text-decoration:underline;}
input{padding:0px;margin:0px;}
.txtbox{border:1px solid #E79F50;height:20px;line-height:22px;width:120px;}
.bfont{font:700 12px "宋体"};
#login{width:400px;height:100%;overflow:hidden;margin:0px auto;}
#title{width:400px;height:25px;line-height:25px;color:#F60;font-weight:700;background-color:#FDEBD9;text-align:center;margin:0px auto;}
#loginbox{width:185px;height:60px;margin:10px 20px;float:left;display:inline;}
#btnlogin{width:55px;height:60px;float:right;margin:10px 30px 10px 5px;}
#forget{width:200px;margin:0px auto;height:25px;line-height:25px;text-align:center;}
#forget span{width:80px;display:inline;margin:0px 10px;}
</style>
<body>
<div id="login">
<div id="title">个人登录后才能投递简历,没有注册请先注册成为个人会员。</div>
<div style="width:320px;height:80px;margin:0px auto;">
<table id="loginbox" border="0" cellpadding="0" cellspacing="0">
<tr style="height:30px">
<td class="bfont">用户名:</td>
<td><input class="txtbox" type="text" name="username" /></td>
</tr>
<tr>
<td class="bfont">密 码:</td>
<td><input class="txtbox" type="password" name="password" /></td>
</tr>
</table>
<div id="btnlogin"><a href="#"><img src="images/login.gif" width="55" height="55" /></a></div>
</div>
<div id="forget">
<span style="float:left;"><a href="#">忘记密码?</a></span>
<span style="float:right;"><a href="#">没有注册?</a></span>
</div>
<div style="height:25px;line-height:25px;text-align:center">马上注册并填写简历,你就会得到更多更好的机会。 <a style="color:#06F;text-decoration:underline;font-weight:700" href="#">点击注册</a></div>
</div>
</body>
</html>
jquery代码你可以在http://www.jtlzj.net/_skin/js/jquery.js下载
然后另外的一个thickbox_plus.js里边的代码就是:
$(document).ready(TB_launch);
// function for adding Thickbox to elements of class .thickbox
// wrapped by Christian Montoya for uses other than $(document).ready
function TB_launch() {
$("a.thickbox").click(function(){
var t = this.title;
TB_show(t,this.href);
this.blur();
return false;
});
}
function TB_show(caption, url) { //function called when the user clicks on a thickbox link
try {
$("body")
.append("<div id='TB_overlay'></div><div id='TB_window'></div>");
$("#TB_overlay").css("opacity","0.6");
$("#TB_overlay").css("filter","alpha(opacity=60)");
$("#TB_overlay").css("-moz-opacity","0.6");
$(window).resize(TB_position);
$("body").append("<div id='TB_load'><div id='TB_loadContent'><img src='images/circle_animation.gif' /></div></div>");
$("#TB_overlay").show();
var urlString = /.jpg|.jpeg|.png|.gif|.html|.htm/g;
var urlType = url.match(urlString);
if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif'){//code to show images
var imgPreloader = new Image();
imgPreloader.onload = function(){
// Resizing large images added by Christian Montoya
var de = document.documentElement;
var x = (self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth) - 50;
var y = (self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight) - 80;
if(imgPreloader.width > x) {
imgPreloader.height = imgPreloader.height * (x/imgPreloader.width);
imgPreloader.width = x;
if(imgPreloader.height > y) {
imgPreloader.width = imgPreloader.width * (y/imgPreloader.height);
imgPreloader.height = y;
}
}
else if(imgPreloader.height > y) {
imgPreloader.width = imgPreloader.width * (y/imgPreloader.height);
imgPreloader.height = y;
if(imgPreloader.width > x) {
imgPreloader.height = imgPreloader.height * (x/imgPreloader.width);
imgPreloader.width = x;
}
}
// End Resizing
TB_WIDTH = imgPreloader.width + 30;
TB_HEIGHT = imgPreloader.height + 60;
$("#TB_window").append("<img id='TB_Image' src='"+url+"' width='"+imgPreloader.width+"' height='"+imgPreloader.height+"' alt='"+caption+"'/>"+ "<div id='TB_caption'>"+caption+"</div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton'>关闭</a></div>");
$("#TB_closeWindowButton").click(TB_remove);
$("#TB_Image").click(TB_remove); // close when image clicked added by Christian Montoya
TB_position();
$("#TB_load").remove();
$("#TB_window").slideDown("normal");
}
imgPreloader.src = url;
}
if(urlType == '.htm' || urlType == '.html'){//code to show html pages
var queryString = url.replace(/^[^\?]+\??/,'');
var params = parseQuery( queryString );
TB_WIDTH = (params['width']*1) + 30;
TB_HEIGHT = (params['height']*1) + 40;
ajaxContentW = TB_WIDTH - 30;
ajaxContentH = TB_HEIGHT - 45;
$("#TB_window").append("<div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton'>关闭</a></div><div id='TB_ajaxContent' style='width:"+ajaxContentW+"px;height:"+ajaxContentH+"px;'></div>");
$("#TB_closeWindowButton").click(TB_remove);
$("#TB_ajaxContent").load(url, function(){
TB_position();
$("#TB_load").remove();
$("#TB_window").slideDown("normal");
});
}
} catch(e) {
alert( e );
}
}
//helper functions below
function TB_remove() {
// #TB_load removal added by Christian Montoya; solves bug when overlay is closed before image loads
$("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_load').remove();});
return false;
}
function TB_position() {
var de = document.documentElement;
var w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
var h = self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
if (window.innerHeight && window.scrollMaxY) {
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
yScroll = document.body.offsetHeight;
}
$("#TB_window").css({width:TB_WIDTH+"px",height:TB_HEIGHT+"px",
left: ((w - TB_WIDTH)/2)+"px", top: ((h - TB_HEIGHT)/2)+"px" });
$("#TB_overlay").css("height",yScroll +"px");
}
function parseQuery ( query ) {
var Params = new Object ();
if ( ! query ) return Params; // return empty object
var Pairs = query.split(/[;&]/);
for ( var i = 0; i < Pairs.length; i++ ) {
var KeyVal = Pairs[i].split('=');
if ( ! KeyVal || KeyVal.length != 2 ) continue;
var key = unescape( KeyVal[0] );
var val = unescape( KeyVal[1] );
val = val.replace(/\+/g, ' ');
Params[key] = val;
}
return Params;
}
这样应该就是你想要的结果了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/thickbox_plus.js"></script>
<link rel="stylesheet" type="text/css" href="css/thickbox.css"/>
</head>
<body>
<a href="ShowLogin.html?height=160;width=400" title="应聘该职位并投递简历" class="thickbox" >马上应聘该职位</a>
</body>
</html>
这个就是弹出的那层的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
*{margin:0px;border:0px;padding:0px;}
body{font:12px "宋体";}
a{color:#000;text-decoration:none;}
a:hover{color:#F30;text-decoration:underline;}
input{padding:0px;margin:0px;}
.txtbox{border:1px solid #E79F50;height:20px;line-height:22px;width:120px;}
.bfont{font:700 12px "宋体"};
#login{width:400px;height:100%;overflow:hidden;margin:0px auto;}
#title{width:400px;height:25px;line-height:25px;color:#F60;font-weight:700;background-color:#FDEBD9;text-align:center;margin:0px auto;}
#loginbox{width:185px;height:60px;margin:10px 20px;float:left;display:inline;}
#btnlogin{width:55px;height:60px;float:right;margin:10px 30px 10px 5px;}
#forget{width:200px;margin:0px auto;height:25px;line-height:25px;text-align:center;}
#forget span{width:80px;display:inline;margin:0px 10px;}
</style>
<body>
<div id="login">
<div id="title">个人登录后才能投递简历,没有注册请先注册成为个人会员。</div>
<div style="width:320px;height:80px;margin:0px auto;">
<table id="loginbox" border="0" cellpadding="0" cellspacing="0">
<tr style="height:30px">
<td class="bfont">用户名:</td>
<td><input class="txtbox" type="text" name="username" /></td>
</tr>
<tr>
<td class="bfont">密 码:</td>
<td><input class="txtbox" type="password" name="password" /></td>
</tr>
</table>
<div id="btnlogin"><a href="#"><img src="images/login.gif" width="55" height="55" /></a></div>
</div>
<div id="forget">
<span style="float:left;"><a href="#">忘记密码?</a></span>
<span style="float:right;"><a href="#">没有注册?</a></span>
</div>
<div style="height:25px;line-height:25px;text-align:center">马上注册并填写简历,你就会得到更多更好的机会。 <a style="color:#06F;text-decoration:underline;font-weight:700" href="#">点击注册</a></div>
</div>
</body>
</html>
jquery代码你可以在http://www.jtlzj.net/_skin/js/jquery.js下载
然后另外的一个thickbox_plus.js里边的代码就是:
$(document).ready(TB_launch);
// function for adding Thickbox to elements of class .thickbox
// wrapped by Christian Montoya for uses other than $(document).ready
function TB_launch() {
$("a.thickbox").click(function(){
var t = this.title;
TB_show(t,this.href);
this.blur();
return false;
});
}
function TB_show(caption, url) { //function called when the user clicks on a thickbox link
try {
$("body")
.append("<div id='TB_overlay'></div><div id='TB_window'></div>");
$("#TB_overlay").css("opacity","0.6");
$("#TB_overlay").css("filter","alpha(opacity=60)");
$("#TB_overlay").css("-moz-opacity","0.6");
$(window).resize(TB_position);
$("body").append("<div id='TB_load'><div id='TB_loadContent'><img src='images/circle_animation.gif' /></div></div>");
$("#TB_overlay").show();
var urlString = /.jpg|.jpeg|.png|.gif|.html|.htm/g;
var urlType = url.match(urlString);
if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif'){//code to show images
var imgPreloader = new Image();
imgPreloader.onload = function(){
// Resizing large images added by Christian Montoya
var de = document.documentElement;
var x = (self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth) - 50;
var y = (self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight) - 80;
if(imgPreloader.width > x) {
imgPreloader.height = imgPreloader.height * (x/imgPreloader.width);
imgPreloader.width = x;
if(imgPreloader.height > y) {
imgPreloader.width = imgPreloader.width * (y/imgPreloader.height);
imgPreloader.height = y;
}
}
else if(imgPreloader.height > y) {
imgPreloader.width = imgPreloader.width * (y/imgPreloader.height);
imgPreloader.height = y;
if(imgPreloader.width > x) {
imgPreloader.height = imgPreloader.height * (x/imgPreloader.width);
imgPreloader.width = x;
}
}
// End Resizing
TB_WIDTH = imgPreloader.width + 30;
TB_HEIGHT = imgPreloader.height + 60;
$("#TB_window").append("<img id='TB_Image' src='"+url+"' width='"+imgPreloader.width+"' height='"+imgPreloader.height+"' alt='"+caption+"'/>"+ "<div id='TB_caption'>"+caption+"</div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton'>关闭</a></div>");
$("#TB_closeWindowButton").click(TB_remove);
$("#TB_Image").click(TB_remove); // close when image clicked added by Christian Montoya
TB_position();
$("#TB_load").remove();
$("#TB_window").slideDown("normal");
}
imgPreloader.src = url;
}
if(urlType == '.htm' || urlType == '.html'){//code to show html pages
var queryString = url.replace(/^[^\?]+\??/,'');
var params = parseQuery( queryString );
TB_WIDTH = (params['width']*1) + 30;
TB_HEIGHT = (params['height']*1) + 40;
ajaxContentW = TB_WIDTH - 30;
ajaxContentH = TB_HEIGHT - 45;
$("#TB_window").append("<div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton'>关闭</a></div><div id='TB_ajaxContent' style='width:"+ajaxContentW+"px;height:"+ajaxContentH+"px;'></div>");
$("#TB_closeWindowButton").click(TB_remove);
$("#TB_ajaxContent").load(url, function(){
TB_position();
$("#TB_load").remove();
$("#TB_window").slideDown("normal");
});
}
} catch(e) {
alert( e );
}
}
//helper functions below
function TB_remove() {
// #TB_load removal added by Christian Montoya; solves bug when overlay is closed before image loads
$("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_load').remove();});
return false;
}
function TB_position() {
var de = document.documentElement;
var w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
var h = self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
if (window.innerHeight && window.scrollMaxY) {
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
yScroll = document.body.offsetHeight;
}
$("#TB_window").css({width:TB_WIDTH+"px",height:TB_HEIGHT+"px",
left: ((w - TB_WIDTH)/2)+"px", top: ((h - TB_HEIGHT)/2)+"px" });
$("#TB_overlay").css("height",yScroll +"px");
}
function parseQuery ( query ) {
var Params = new Object ();
if ( ! query ) return Params; // return empty object
var Pairs = query.split(/[;&]/);
for ( var i = 0; i < Pairs.length; i++ ) {
var KeyVal = Pairs[i].split('=');
if ( ! KeyVal || KeyVal.length != 2 ) continue;
var key = unescape( KeyVal[0] );
var val = unescape( KeyVal[1] );
val = val.replace(/\+/g, ' ');
Params[key] = val;
}
return Params;
}
这样应该就是你想要的结果了
追问
那么长 懒得看了 我要的没有那么复杂
展开全部
先在 <div> 的父辈元素设定 position: relative;
在同级的 <div> 和自身都设置 position: relative;
在目标 <div> 设置 z-index: 99
试试看,不行的话你要贴代码… 文字描述不具体
在同级的 <div> 和自身都设置 position: relative;
在目标 <div> 设置 z-index: 99
试试看,不行的话你要贴代码… 文字描述不具体
追问
你这个方法是不行我 早就试过了 刚刚找到了 给body加一个overflow:hidden就可以 了 不信你去试一下
追答
我不用试啊… 因为我没有完全理解你的问题… 都说了文字描述不具体,抱歉帮不上忙
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询
广告 您可能关注的内容 |