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


Posted in Javascript onAugust 13, 2015

本文实例讲述了js实现仿Discuz文本框弹出层效果。分享给大家供大家参考。具体如下:

这是一个在经典论坛曾经热讨论的问题,记得在QQ邮箱里也有类似功能,Discuz7.0论坛里同样也有,当你的鼠标单击文本框的时候,会弹出一个包含文字、图片、表单无素的DIV层,里面的元素都可以进行操作,很方便,选中的值会自动添加到文本框内。本代码经过了多次修正,没有进行过多美化,你美工好的话可以自己美化。

运行效果截图如下:

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

具体代码如下:

<!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>
<Script language="javascript" type="text/javascript">
function moveselect(obj,target,all){
 if (!all) all=0
 if (obj!="[object]") obj=eval("document.all."+obj)
 target=eval("document.all."+target)
 if (all==0)
 {
 while (obj.selectedIndex>-1){
 mot=obj.options[obj.selectedIndex].text
 mov=obj.options[obj.selectedIndex].value
 obj.remove(obj.selectedIndex)
 var newoption=document.createElement("OPTION");
 newoption.text=mot
 newoption.value=mov
 target.add(newoption)
 }
 }
 else
 {
 for (i=0;i<obj.length;i++)
 {
 mot=obj.options[i].text
 mov=obj.options[i].value
 var newoption=document.createElement("OPTION");
 newoption.text=mot
 newoption.value=mov
 target.add(newoption)
 }
obj.options.length=0
 }
}
function dakai(){
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block'
}
function guanbi(){
var yuanGong=document.getElementById("yuanGong")
yuanGong.value=""//如果不加这句,则每次选择的结果追加
var huoQu=document.getElementById("D2")
for(var k=0;k<huoQu.length;k++)
yuanGong.value=yuanGong.value + huoQu.options[k].value + " "//这里的" "中间为空格,为字符间的分隔符,你可以改成别的
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none' 
}
</script>
<style>
.black_overlay{display: none;position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;background-color:#FFFFFF;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: 16px;border: 16px solid orange; margin:-32px; background-color: white;z-index:1002;overflow: auto;}
</style>
</head>
<body>
<input type="text" id="yuanGong" onclick="dakai()" size="50">
<div id="light" class="white_content">
<table border="1" width="350" id="table4" bordercolor="#CCCCCC" bordercolordark="#CCCCCC" bordercolorlight="#FFFFFF" cellpadding="3" cellspacing="0">
  <tr>
  <td width="150" height="200" align="center" valign="middle">
   该部门员工
   <select size="12" name="D1" ondblclick="moveselect(this,'D2')" multiple="multiple" style="width:140px">
   <option value="员工1">员工1</option>
   <option value="员工2">员工2</option>
   <option value="员工3">员工3</option>
   </select>
  </td>
  <td width="50" height="200" align="center" valign="middle">
  <input type="button" value="<<" name="B3" onclick="moveselect('D2','D1',1)" /><br />
  <input type="button" value="<" name="B5" onclick="moveselect('D2','D1')" /><br />
  <input type="button" value=">" name="B6" onclick="moveselect('D1','D2')" /><br />
  <input type="button" value=">>" name="B4" onclick="moveselect('D1','D2',1)" /><br />
  </td>
  <td width="150" height="200" align="center" valign="middle">
  未划分部门员工
   <select size="12" name="D2" id="D2" ondblclick="moveselect(this,'D1')" multiple="multiple" style="width:140px">
   <option value="员工4">员工4</option>
   <option value="员工5">员工5</option>
   </select>
  </td>
  </tr>
</table>
<a href = "javascript:void(0)" onclick = "guanbi()">确定</a><BR><BR>
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
popdiv
Jul 14 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
Feb 25 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
Nov 26 Javascript
js显示文本框提示文字的方法
May 07 Javascript
简述jQuery ajax的执行顺序
Jan 05 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 Javascript
javascript学习指南之回调问题
Apr 23 Javascript
JavaScript 中有关数组对象的方法(详解)
Aug 15 Javascript
Javascript6中字符串的四个新用法分享
Sep 11 Javascript
JavaScript中数组去重的5种方法
Jul 04 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
深入学习JavaScript中的原型prototype
Aug 13 #Javascript
javascript获取本机操作系统类型的方法
Aug 13 #Javascript
javascript中offset、client、scroll的属性总结
Aug 13 #Javascript
用JavaScript实现PHP的urlencode与urldecode函数
Aug 13 #Javascript
asp.net中oracle 存储过程(图文)
Aug 12 #Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 #Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 #Javascript
You might like
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
php的计数器程序
2006/10/09 PHP
怎样在php中使用PDF文档功能
2006/10/09 PHP
php实现处理输入转义字符的代码
2015/11/08 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
PHP模糊查询技术实例分析【附源码下载】
2019/03/07 PHP
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
js图片处理示例代码
2014/05/12 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
2018/11/02 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
python开发之文件操作用法实例
2015/11/13 Python
django基础之数据库操作方法(详解)
2017/05/24 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
Django中提供的6种缓存方式详解
2019/08/05 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
python 如何对logging日志封装
2020/12/02 Python
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
adidas泰国官网:adidas TH
2020/07/11 全球购物
工程专业求职自荐书范文
2014/02/18 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书
办公室个人总结
2015/02/28 职场文书
党员转正大会主持词
2015/07/02 职场文书
MySQL中int (10) 和 int (11) 的区别
2022/01/22 MySQL
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript