| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 1062 人关注过本帖
标题:弹出层问题!
只看楼主 加入收藏
海风308
Rank: 1
等 级:新手上路
帖 子:64
专家分:0
注 册:2008-10-28
结帖率:100%
收藏
 问题点数:0 回复次数:4 
弹出层问题!
做了个简单的网页,模仿校内网的高级搜索
可是点击大学的输入框,弹出的层不能覆盖<select></select>,把层的z-index属性改到很大也不行,请问如何解决?
代码如下:
<html>
<head>
<style type="text/css">
<!--
#Layer1 {
    position:absolute;
    width:410px;
    height:233px;
    z-index:99;
    left: 7px;
    top: 109px;
    background-color: #CCCCCC;
    display:none;
}
#Layer2 {
    position:absolute;
    width:39px;
    height:20px;
    z-index:101;
    left: 376px;
    top: 210px;
}
-->
</style>
<script type="text/javascript">
function closeDiv(){
    document.getElementById("Layer1").style.display='none';
}
function displayDiv(){
    document.getElementById("Layer1").style.display='block';
   
}
</script>
</head>
<body>
<h1>高级搜索</h1>
<form>
<table>
<tr>
    <td>
    姓名:
    </td>
    <td>
    <input type="text" name="userName"/>
    </td>
</tr>

<tr>
    <td>
    大学:
    </td>
    <td>
    <input type="text" name="university" onClick="displayDiv()"/>
    </td>
   
    <td>
    <select name="daxueInTime">
    <option value="">入学年份</option>

    </select>
    </td>

</tr>

<tr>
    <td>

    </td>
    <td>
    <select name="yuanxi">
    <option value="">院系</option>
    </select>

     <select name="sushe">
    <option value="">宿舍</option>
    </select>
    </td>
</tr>

<tr>
    <td>
    高中:
    </td>
    <td>
    <input type="text" name="gaozhong"/>
    </td>
    <td>
   
    </td>
    <td>
   
    </td>
</tr>

<tr>
    <td>
    班级:
    </td>
    <td>
    <select name="nianji">
    <option value="">请选择年级</option>
    <option value="1">高一</option>
    <option value="2">高二</option>
    <option value="3">高三</option>
    </select>
    </td>
    <td>
        <select name="banji">
    <option value="">请选择班级</option>
    </select>
    </td>
    <td>
     <select name="gaozhongInTime">
    <option value="">入学年份</option>
    </select>
    </td>
</tr>

<tr>
    <td>
    初中:
    </td>
    <td>
    <input type="text" name="chuzhongName"/>
    </td>
    <td>
         <select name="chuzhongInTime">
    <option value="">入学年份</option>
    </select>
    </td>
    <td>
   
    </td>
</tr>

<tr>
    <td>
    小学:
    </td>
    <td>
    <input name="xiaoxueName" type="text"/>
    </td>
    <td>
         <select name="xiaoxueInTime">
    <option value="">入学年份</option>
    </select>
    </td>
    <td>
   
    </td>
</tr>

<tr>
    <td>
    性别:
    </td>
    <td>
    <input type="radio" name="sex" value="3" checked="checked"/>不限&nbsp;<input type="radio" name="sex" value="1"/>男&nbsp;
    <input type="radio" name="sex" value="0"/>女&nbsp;
    </td>
</tr>

<tr>
    <td>
    生日:
    </td>
    <td>
             <select name="birthdayYear">
    <option value="">选择年份</option>
    </select>年
    </td>
    <td>
             <select name="birthdayMonth">
    <option value="">月份</option>
   
    </select>月
    </td>
    <td>
                 <select name="birthdayMonth">
    <option value="">天</option>
    </select>日
    </td>
</tr>

<tr>
    <td>
    家乡:
    </td>
    <td>
    <select name="homeSheng">
      <option value="">-请选择省/市-</option>
    </select>
    </td>
    <td>
    <select name="homeShi">
    <option value="">城市</option>
    </select>
    </td>
    <td>
   
    </td>
</tr>

<tr>
    <td>
    星座:
    </td>
    <td>
    <select name="xingzuo">
    </select>
    </td>
</tr>

<tr>
    <td colspan="4" align="center">
    <input type="submit" value="搜索"/>
    </td>
</tr>
</table>
</form>
    <div id="Layer1">
<div id="Layer2">
<input type="button" value="关闭" onClick="closeDiv()"/></div>
</div>

</body>
</html>
搜索更多相关主题的帖子: 校内网 style 大学 
2008-12-10 13:18
bygg
Rank: 16Rank: 16Rank: 16Rank: 16
来 自:乖乖的心中
等 级:版主
威 望:241
帖 子:13555
专家分:3076
注 册:2006-10-23
收藏
得分:0 
<html>
<head>
<style type="text/css">
<!--
#Layer1 {
    position:absolute;
    width:410px;
    height:233px;
    z-index:99;
    left: 7px;
    top: 109px;
    background-color: #CCCCCC;
        display:none;
}
#Layer2 {
    position:absolute;
    width:39px;
    height:20px;
    z-index:101;
    left: 376px;
    top: 210px;
}
-->
</style>
<script type="text/javascript">
function closeDiv(){
    document.getElementById("Layer1").style.display='none';
}
function displayDiv(){
    document.getElementById("Layer1").style.display='block';
   
}
</script>
</head>
<body>
<h1>高级搜索</h1>
<form>
<table>
<tr>
    <td>
    姓名:
    </td>
    <td>
    <input type="text" name="userName"/>
    </td>
</tr>

<tr>
    <td>
    大学:
    </td>
    <td>
    <input type="text" name="university" onClick="displayDiv()"/>
    </td>
   
    <td>
    <select name="daxueInTime">
    <option value="">入学年份</option>

    </select>
    </td>

</tr>

<tr>
    <td>

    </td>
    <td>
    <select name="yuanxi">
    <option value="">院系</option>
    </select>

     <select name="sushe">
    <option value="">宿舍</option>
    </select>
    </td>
</tr>

<tr>
    <td>
    高中:
    </td>
    <td>
    <input type="text" name="gaozhong"/>
    </td>
    <td>
   
    </td>
    <td>
   
    </td>
</tr>

<tr>
    <td>
    班级:
    </td>
    <td>
    <select name="nianji">
    <option value="">请选择年级</option>
    <option value="1">高一</option>
    <option value="2">高二</option>
    <option value="3">高三</option>
    </select>
    </td>
    <td>
        <select name="banji">
    <option value="">请选择班级</option>
    </select>
    </td>
    <td>
     <select name="gaozhongInTime">
    <option value="">入学年份</option>
    </select>
    </td>
</tr>

<tr>
    <td>
    初中:
    </td>
    <td>
    <input type="text" name="chuzhongName"/>
    </td>
    <td>
         <select name="chuzhongInTime">
    <option value="">入学年份</option>
    </select>
    </td>
    <td>
   
    </td>
</tr>

<tr>
    <td>
    小学:
    </td>
    <td>
    <input name="xiaoxueName" type="text"/>
    </td>
    <td>
         <select name="xiaoxueInTime">
    <option value="">入学年份</option>
    </select>
    </td>
    <td>
   
    </td>
</tr>

<tr>
    <td>
    性别:
    </td>
    <td>
    <input type="radio" name="sex" value="3" checked="checked"/>不限 <input type="radio" name="sex" value="1"/>男
    <input type="radio" name="sex" value="0"/>女
    </td>
</tr>

<tr>
    <td>
    生日:
    </td>
    <td>
             <select name="birthdayYear">
    <option value="">选择年份</option>
    </select>年
    </td>
    <td>
             <select name="birthdayMonth">
    <option value="">月份</option>
   
    </select>月
    </td>
    <td>
                 <select name="birthdayMonth">
    <option value="">天</option>
    </select>日
    </td>
</tr>

<tr>
    <td>
    家乡:
    </td>
    <td>
    <select name="homeSheng">
      <option value="">-请选择省/市-</option>
    </select>
    </td>
    <td>
    <select name="homeShi">
    <option value="">城市</option>
    </select>
    </td>
    <td>
   
    </td>
</tr>

<tr>
    <td>
    星座:
    </td>
    <td>
    <select name="xingzuo">
    </select>
    </td>
</tr>

<tr>
    <td colspan="4" align="center">
    <input type="submit" value="搜索"/>
    </td>
</tr>
</table>
</form>
    <div id="Layer1">
            <iframe  style="z-index:-1;width:410px;height:233px; border:0;position:absolute;" frameborder=0 scrolling=no></iframe>            <div id="Layer2">
                <input type="button" value="关闭" onClick="closeDiv()"/>
            </div>
        </div>
</body>
</html>

注意iframe的高度和宽度要和你弹出层一样..
.

[[it] 本帖最后由 bygg 于 2008-12-10 13:49 编辑 [/it]]

飘过~~
2008-12-10 13:48
海风308
Rank: 1
等 级:新手上路
帖 子:64
专家分:0
注 册:2008-10-28
收藏
得分:0 
谢谢,可以了,可是能告诉我这是什么原理吗?
2008-12-10 14:25
bygg
Rank: 16Rank: 16Rank: 16Rank: 16
来 自:乖乖的心中
等 级:版主
威 望:241
帖 子:13555
专家分:3076
注 册:2006-10-23
收藏
得分:0 
因为网页中,下拉框的优化级比较高.
差不多的控件都不能显示在它之上,用iframe 却可以做到..

飘过~~
2008-12-10 14:34
海风308
Rank: 1
等 级:新手上路
帖 子:64
专家分:0
注 册:2008-10-28
收藏
得分:0 
原来如此,谢谢!
2008-12-10 14:42
快速回复:弹出层问题!
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.018513 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved