弹出层选择器

最新推荐文章于 2024-01-18 16:13:57 发布

zhy251917345

最新推荐文章于 2024-01-18 16:13:57 发布

阅读量885

点赞数 1

CC 4.0 BY-SA版权

文章标签： ie javascript border class stylesheet css

本文链接：https://blog.youkuaiyun.com/zhy251917345/article/details/4889160

本文介绍了一个简单的弹出层选择器的实现方法，包括HTML结构定义、CSS样式设置及JavaScript交互逻辑。通过这些技术，可以创建一个带有关闭功能的弹出窗口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

***********************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=gb2312" />
<title>弹出层选择器</title>
<link href="弹出层选择器.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="弹出层选择器.js"></script>
</head>
<body>
<div id="main-div">
<div class="gb"><span>弹出层选择器</span><img src="My Pictures/up.png" /></div>
<div class="hig">
    <div id="lable-div">
      <p style="height:90px;"><span>*</span> 理由</p>
      <p></p>
    </div>
    <div id="content-div">
      <p style="height:90px;">
        <textarea name="理由" cols="50" rows="5"></textarea>
      </p>
      <p>
        <input class="btn" name="保存草稿" type="button" value="保存草稿" />
        <input class="btn" name="提交" type="button" value="提    交" />
      </p>
    </div>
</div>
</div>
<div id="popDiv" class="mydiv" style="display:none;">
<div>
  <a href="javascript:closeDiv()">关闭窗口</a>
</div>
</div>
<div id="bg" class="bg" style="display:none;"></div>
<a href="javascript:showDiv()">点我,弹出层</a>
</body>
</html>

************************js******************************

// JavaScript Document
function showDiv(){
document.getElementById('popDiv').style.display='block';
document.getElementById('bg').style.display='block';
}

function closeDiv(){
document.getElementById('popDiv').style.display='none';
document.getElementById('bg').style.display='none';
}

***********************css*******************************

/* CSS Document */

/* CSS Document */
/* CSS Document */
.gb
{
height:18px;
width:700px;
background-color:#E7F0F5;
border:1px solid #C7D9EA;
position:relative;
padding-right:0px;
padding-bottom:0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
color: #106CC6;
}
.gb span
{
position:relative;
padding: 0 0 0 0;
margin:0 0 0 0;
top:3px;
}
.hig
{
height:auto;
border: 1px;
border-color:#C7D9EA;
padding:0 0 0 0;
margin: 0 0 0 0;
float:left;
overflow: hidden;
}
img
{
position:relative;
margin-right:0px;
margin-bottom:0px;
left: 565px;
top: 9px;
}
#lable-div
{
width:150px;
position:absolute;
padding: 0 0 0 0;
margin: 0 0 0 0;
height:auto;
float:left;
border:0px;
}
#content-div
{
width:548px;
position:absolute;
padding: 0 0 0 0;
margin: 0 0 0 0;
height:auto;
float:left;
border:0px;
left:163px;
}
#lable-div span
{
color: #FF0000;
text-align: center;
}
#lable-div p
{
position: relative;
/*margin-left: 20px;*/
margin-top: 5px;
padding: 10px 10px 10px 10px;
margin: 0 0 0 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
color: #999999;
font-weight: bold;
}
#main-div
{
float:left;
height:580px;
width:auto;
margin: 0 0 0 0;
padding:0 0 0 0;
border:1px solid #C7D9EA;
}
#content-div p
{
position: relative;
/*margin-left: 20px;*/
margin-top: 5px;
padding: 10px 10px 10px 10px;
margin: 0 0 0 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
color: #000000;
font-weight: bold;
}
#content-div p span
{
padding: 0 0 0 0;
margin: 5px 5px 5px 5px;
text-align:center;
}
.btn
{
padding:2px 0 3px 0;
width:70px;
height:20px;
border:1px;
margin: 1px 1px 1px 20px;
text-align:center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
font-weight: bold;
}
#content-div p textarea
{
margin: 0 0 0 0;
padding:0 0 0 0;
}

html,body {height:100%; font-size:12px;}

.mydiv {
   background-color: #FFCC66;
   border: 1px solid #f00;
   text-align: center;
   line-height: 40px;
   font-size: 12px;
   font-weight: bold;
   z-index:99;
   width: 350px;
   height: 400px;
   left:50%;/*FF IE7*/
   top:50%;/*FF IE7*/

   margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */
   margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/

   margin-top:0px;

   position:fixed!important;/*FF IE7*/
   position:absolute;/*IE6*/

   _top:       expression(eval(document.compatMode &&
      document.compatMode=='CSS1Compat') ?
      documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
      document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

}

.bg {
   background-color: #666;
   width: 1024px;
   height: 100%;
   left:0;
   top:0;/*FF IE7*/
   filter:alpha(opacity=50);/*IE*/
   opacity:0.5;/*FF*/
   z-index:1;

   position:fixed!important;/*FF IE7*/
   position:absolute;/*IE6*/

   _top:       expression(eval(document.compatMode &&
      document.compatMode=='CSS1Compat') ?
      documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
      document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/

}
.mydiv div
{
   position:relative;
   margin: 0 0 0 0;
   padding: 0 0 0 0;
   border: 1px solid inset #3366CC;
   top:50px;
   left:0px;
   width:100%;
   height:350px;
   background-color:#FF6600;
   z-index:9999;
}