<!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>
<style type="text/css">
/*reset css*/
body,input{letter-spacing:1px;font:12px/1.5 tahoma,arial,\5b8b\4f53}
body{color:red;}
div,h2,p,input,select{margin:0;padding:0}
input{vertical-align:middle}
/*demo css*/
#demo{position:relative;}
#demo input{_margin-top:1px;padding-left:5px;border:1px solid #999;width:700px;height:20px;font-size:14px;color:#000}
#dropbox{position:absolute;display:none;z-index:9999;padding:5px;background:#fff;border:1px solid #999;border-top:0;z-index:999}
#dropbox a{margin-right:8px;text-decoration:none}
#dropbox a:hover{text-decoration:underline}
#dropbox em.close{float:right;color:#999;font-style:normal;cursor:pointer}
</style>
<script type="text/javascript">
window.onload = function () {
var oDemo = document.getElementById("demo");
var oInput = document.getElementsByTagName("input")[0];
var oDropbox = document.getElementById("dropbox");
var aA = oDropbox.getElementsByTagName("a");
var oClose = document.getElementsByTagName("em")[0];
var i = 0;
oInput.onclick = function (event) {
oDropbox.style.display = "block";
oDropbox.style.top = oDemo.offsetHeight + "px";
oDropbox.style.left = oInput.offsetLeft + "px";
oDropbox.style.width = oInput.clientWidth - 10 + "px";
(event || window.event).cancelBubble = true;
};
for (i = 0; i < aA.length; i++) {
aA[i].onclick = function (event) {
oInput.value = this.innerHTML;
(event || window.event).cancelBubble = true;
};
}
oDropbox.onclick = function (event) {
(event || window.event).cancelBubble = true;
};
document.onclick = oClose.onclick = function () {
oDropbox.style.display = "none";
};
};
</script>
</head>
<body>
<div id="demo">
<label for="tagsbox"><strong>标签:</strong><input type="text" value="点我" class="tagsbox" data-count="10" /></label>
<div id="dropbox">
<em class="close" title="关闭">关闭</em>
<a href="javascript:void(0)">测试一</a>
<a href="javascript:void(0)">测试二</a>
<a href="javascript:void(0)">测试三</a>
<a href="javascript:void(0)">测试四</a>
<a href="javascript:void(0)">测试五</a>
<a href="javascript:void(0)">测试六</a>
</div>
<br style="clear:both" />
</div>
</body>
</html>
弹出层取值,层取值
最新推荐文章于 2020-12-09 14:06:24 发布