<html>
<head>
<title>弹出框例子[2009-12-28]</title>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function getValue(name)
{
$('light').style.display='none';
$('fade').style.display='none';
$('txt_addr').value=name;
}
</script>
<style>
body
{
font:13px Arial;
margin:0 0 0 0;
}
a:link{text-decoration:none}/*未访问过的*/
a:visited{text-decoration:none;background-color: white;}/*已访问过的*/
a:hover{text-decoration:none;CURSOR:hand;background-color:#ff7804;}/*在链接上方*/
.black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); }
.white_content { display: none; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; padding: 0px; border: 1px solid orange; background-color: white; z-index:1002; overflow: auto; }
</style>
</head>
<body>
地址：<input type="text" id='txt_addr' value='请选择地址!'></input>
<a href="javascript:void(0)" οnclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">点击这里打开窗口</a>
<div id="light" class="white_content" runnat="server">
<div style="color:white;width:100%;height:27px;padding:5px;
FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffA530, EndColorStr=#ff7804);">
<span style="width:55%;color:white;">请选择工作地点</span>
<span style="width:43%;text-align:right;">
<a href="javascript:void(0)" οnclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
[关闭]
</a>
</span>
</div>
<div style="clear:both;padding-top:5px;padding-bottom:5px;">
<div style="font-size:14px;color:#F7832e;clear:both;background-color:#f7f7f7;"><strong>主要城市:</strong></div>
<div style="clear:both;"><strong>华北东北：</strong>
<a href="javascript:void(0);"><span οnclick="javascript:getValue(this.innerText);" class="a_class" style="cursor:hand;color:black;margin-left:4px;margin-right:4px;">北京</span></a>
<a href="javascript:void(0);"><span οnclick="javascript:getValue(this.innerText);" class="a_class" style="cursor:hand;color:black;margin-left:4px;margin-right:4px;">上海</span></a>
<a href="javascript:void(0);"><span οnclick="javascript:getValue(this.innerText);" class="a_class" style="cursor:hand;color:black;margin-left:4px;margin-right:4px;">飞机场</span></a>
<a href="javascript:void(0);"><span οnclick="javascript:getValue(this.innerText);" class="a_class" style="cursor:hand;color:black;margin-left:4px;margin-right:4px;">小JJ</span></a>
<a href="javascript:void(0);"><span οnclick="javascript:getValue(this.innerText);" class="a_class" style="cursor:hand;color:black;margin-left:4px;margin-right:4px;">阳贱人</span></a>
</div>
<div style="font-size:14px;color:#F7832e;clear:both;background-color:#f7f7f7;margin-top:5px;"><strong>主要城市:</strong></div>
<div style="clear:both;"><strong>华北东北：</strong>
<a href="javascript:void(0);"><span οnclick="javascript:getValue(this.innerText);" class="a_class" style="cursor:hand;color:black;margin-left:4px;margin-right:4px;">北京1</span></a>
<a href="javascript:void(0);"><span οnclick="javascript:getValue(this.innerText);" class="a_class" style="cursor:hand;color:black;margin-left:4px;margin-right:4px;">上海2</span></a>
<a href="javascript:void(0);"><span οnclick="javascript:getValue(this.innerText);" class="a_class" style="cursor:hand;color:black;margin-left:4px;margin-right:4px;">飞机场2</span></a>
<a href="javascript:void(0);"><span οnclick="javascript:getValue(this.innerText);" class="a_class" style="cursor:hand;color:black;margin-left:4px;margin-right:4px;">小JJ2</span></a>
<a href="javascript:void(0);"><span οnclick="javascript:getValue(this.innerText);" class="a_class" style="cursor:hand;color:black;margin-left:4px;margin-right:4px;">阳贱人2</span></a>
</div>
</div>
</div>
<div id="fade" class="black_overlay">
</div>
</body>
</html>
扫一扫
2755
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
