js实现了模仿Discuz文本框的弹出层效果

本文通过一个实例说明js实现了模仿Discuz文本框的弹出效果。分享给大家参考。具体如下：

这是经典论坛的热门话题。记得QQ邮箱里也有类似的功能，Discuz7.0论坛里也有。当你用鼠标点击文本框时，会弹出一个包含文字、图片、表格的DIV图层，里面的所有元素都可以操作。非常方便，选中的值会自动添加到文本框中。这个代码修改了很多次，没有过多美化。如果你擅长艺术，你可以美化自己。

运行效果截图如下：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；字符集=GB 2312/标题文本框弹出内容框并取值/title脚本语言=' JavaScript ' type=' text/JavaScript '函数move select(obj，target，all){ if(！all) all=0 if (obj！='[对象]')obj=eval(' document。全部。obj)目标=评估('文档。全部。target)if(all==0){ while(obj。selectedindex-1){ mot=obj。选项selectedindex].文本mov=obj。选项selectedindex].价值目标。移除(物体。selectedindex)var new OPtion=document。创建元素(' OPTION ')；新选项。text=mot新选项。值=mov目标。add(new option)} } else { for(I=0；iobj . lentigi){ mot=obj . options[I].text mov=obj.options[i].value var new OPTION=文档。创建元素(' OPTION ')；新选项。text=mot新选项。值=mov目标。添加(新选项)} obj。选项。length=0 } }函数dakai(){ document。getelementbyid(' light ')。风格。display=' block文件。getelementbyid(' fade ')。风格。display=' block ' }函数guanbi(){ var元恭=document.getElementById('元恭)圆功。value=''//如果不加这句，则每次选择的结果追加var活取=文档。getelementbyid(' D2 ')为(var k=0；长度；k)圆功。价值=圆功。价值活趣。期权k .值' '//这里的' '中间为空格，为字符间的分隔符，你可以改成别的文件。getelementbyid(' light ')。风格。显示='无'；文件。getelementbyid(' fade ')。风格。display=' none ' }/脚本样式。black _ overlay { display : none；绝对位置：前：名0%；左侧： 0%;宽度： 100%;高度： 100%;背景-color : # FFFFFF；z索引：1001;-莫兹-奥帕市3360 0.8；opa city 3360.80 filter : alpha(不透明度=80);}.white _ content { display : none；绝对位置：前：名25%；左侧： 25%;宽度： 50%;高度： 50%;padding: 16pxborder: 16px纯橙色；边距：-32px；背景-颜色：白色；z索引：1002;飞越：汽车；}/style/head dyinput type=' text ' id='元恭onclick=' dakai()' size=' 50 ' div id=' light ' class=' white _ content '表格边框=' 1 ' width=' 350 ' id=' table 4 '边框颜色=' # CCCCCC '边框颜色dark=' # CCCCCC '边框颜色light=' # ffffffff ' cellpadding=' 3 '单元格间距=' 0 ' tr TD宽度=' 150 '高度=' 200 ' align=' center '该部门员工选择尺寸=' 12 '名称=' D1 '点击='移动选择(这是D2 ')'多重='多重'样式='宽度：140像素'选项值='员工1'员工1/选项选项值='员工2'员工2/选项选项值='员工3'员工3/选项/选择/TD TD宽度=' 50 '高度=' 200 '对齐='中心' valgn=' middle '输入类型=' button '值=' name=' B3 ' onclick=' move select '(D2 '，' D1 '，1)'/br/输入类型=' button '值=' move select '(' D2 '，' D1 ')/br/输入类型=' button '值=' name=' B6 ' onclick=' move select '(D1 '，' D2 ')/br/输入类型未划分部门员工选择大小=' 12 '名称=' D2 ' id=' D2 ' 在blclick=' move select(这是' D1 ')'上，multiple=' multiple ' style=' width :140 px '选项值='员工4'员工4/选项选项值='员工5'员工5/option/select/TD/tr/tablea href=' JavaScript : void(0)' onclick=' Guan bi()'确定/AbrBr/div div id=' fade ' class=' black _ overlay '/div/body/html希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。