急!急!div+css实现定位弹出式浮动框,仿智联招聘网站的“请选择职业类别”,点击后弹出浮动窗口???

请发源文件到我QQ34390894,浮动窗口里面带多选框和关闭,麻烦大侠详细讲解步骤,讲的好的加分不是问题!... 请发源文件到我QQ34390894,浮动窗口里面带多选框和关闭,麻烦大侠详细讲解步骤,讲的好的加分不是问题! 展开
 我来答
晴天一丝雨
2011-04-07
知道答主
回答量:35
采纳率:0%
帮助的人:0
展开全部
<!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>website</title>
<style type="text/css">
body,div,input,ul,li{margin:0;padding:0;}
#a {position:relative;width:200px;height:30px;}
#b {width:200px;height:30px;}
#c {position:absolute;top:30px;width:400px;height:200px;background-color:grey;}
#c ul li {float:left;list-style-type:none;width:200px;}
.hidden {display:none;}
.show {display:block;}
</style>
</head>
<body>
<div>
<input id="a" type="button" value="请选择职位类别"/><br/>
<div id="c" class="hidden">
<ul>
<li><input type="checkbox" value=""/><span>销售经理</span></li>
<li><input type="checkbox" value=""/><span>员工</span></li>
<li><input type="checkbox" value=""/><span>员工</span></li>
<li><input type="checkbox" value=""/><span>销售经理</span></li>
</ul>
</div>
</div>
<input id="b" type="button" value="请选择职位名称"/>
<script language="javascript">
var a=document.getElementById("a");
var c=document.getElementById("c");
a.onclick=function(){
c.className="show";
}
</script>
</body>
</html>
楼主要的是不是这种效果?
追问
样式跟这个相似,但有确认、取消、关闭按钮(点击后就可关闭),还有点击后有DIV外边框把里面勾选的内容框住,怎样定义?帮忙解答啊,谢谢!说详细点,本人菜鸟!
追答
其实我也是菜鸟  我学js刚刚半个月的时间  给楼主推荐一本资料  看看对你会有很大的好处  里边有很多js的基础知识  资料名字是:professional javascript for web developers 有中文版也有英文版 不想买书的话 网上也有 这个确认、取消、关闭按钮(点击后就可关闭)的效果我也还没学会 不好意思哈
帐号已注销
2011-04-06 · TA获得超过109个赞
知道答主
回答量:103
采纳率:100%
帮助的人:59万
展开全部
<HTML>
<HEAD>
<TITLE>用Div仿showModalDialog模式菜单的效果</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<STYLE TYPE="text/css" >
body{
background:#eaeaea;
font-size:12px;
}
img{border:0;}
.b{
font-weight:bold;
color:white;
}
.modalDiv{
width:311px;
height:274px;
}
.modalheader{
margin:2px;
padding:2px;
}
.header{
margin:0;
padding:0;
}
.mleft{
width:280px;
float:left;
}
.mright{
float:right;
}
.modalbody{
margin:10px;
padding:2px;
color:blue;
}
</STYLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function ShowModal(dname)
{
var buyDiv=document.getElementById(dname+'SelName');
var objDiv=document.getElementById('objText');
var disable=document.getElementById('disableDiv');
if(buyDiv.style.display=='none')
{
buyDiv.style.display='block';
disable.style.display='block';
buyDiv.innerHTML=objDiv.innerHTML;
}else{
buyDiv.style.display='none';
disable.style.display='none';
}
}
//-->
</SCRIPT>
<BODY>
<input type="button" name="btnshow" id="btnshow" value="显示隐藏Modal" onClick="ShowModal('buy');" />
<div id="buySelName" class="modalDiv" style="position:absolute;left:300px; top:140px;z-index:2;display:none;">
</div>
<div id="disableDiv" style="position:absolute; left:0px; top:0px; width:100%; height:100%; z-index:1; background-color:#000000; border: 0px none #000000; FILTER:alpha(opacity=50);display:none;";>
<iframe src="about:blank" name="hiddenIframe" width="100%" height="100%"></iframe>
</div>
<div id="objText" style="display:none;">
<a href="javascript:ShowModal('buy');">关闭</a>
</div>
</BODY>
</HTML>

改改样式
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式