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 相关文章推荐
Javascript 个人笔记(没有整理,很乱)
Jul 07 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
基于JS实现导航条flash导航条
Jun 17 Javascript
AngularJS入门教程之过滤器详解
Aug 19 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
JavaScript通过mouseover()实现图片变大效果的示例
Dec 20 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 27 Javascript
vue开发移动端底部导航条功能
Apr 08 Javascript
深入学习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
PHP异步调用socket实现代码
2012/01/12 PHP
在PHP站点的页面上添加Facebook评论插件的实例教程
2016/01/08 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
解析URI与URL之间的区别与联系
2013/11/22 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
轻松创建nodejs服务器(8):非阻塞是如何实现的
2014/12/18 NodeJs
jQuery中:button选择器用法实例
2015/01/04 Javascript
js创建对象的方式总结
2015/01/10 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
微信小程序页面间跳转传参方式总结
2019/06/13 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
tensorflow 模型权重导出实例
2020/01/24 Python
Python telnet登陆功能实现代码
2020/04/16 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
三星英国官网:Samsung英国
2018/09/25 全球购物
开学典礼决心书
2014/03/11 职场文书
个人求职信范文
2014/05/24 职场文书
手术室护士个人总结
2015/02/13 职场文书
保送生自荐信
2015/03/06 职场文书
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫