弹出层取值,层取值

最新推荐文章于 2021-03-11 11:59:57 发布

赢在执行

最新推荐文章于 2021-03-11 11:59:57 发布

阅读量1k

点赞数

分类专栏： ASP.NET 文章标签： javascript function input 测试 xhtml div

本文链接：https://blog.csdn.net/hexytxl/article/details/6947392

版权

ASP.NET 专栏收录该内容

8 篇文章 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>弹出层取值</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>

赢在执行

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
弹出层取值,层取值

弹出层取值 /*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*/ #d
复制链接

扫一扫

专栏目录