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高级程序设计 读书笔记之八 Function类及闭包
Feb 27 Javascript
js弹出的对话窗口永远保持居中显示
Dec 15 Javascript
jquery使用jxl插件导出excel示例
Apr 14 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 Javascript
js读取json文件片段中的数据实例
Mar 09 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
微信小程序实现单选选项卡切换效果
Jun 19 Javascript
浅谈javascript错误处理
Aug 11 Javascript
VueCli4项目配置反向代理proxy的方法步骤
May 17 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
介绍一下28个JS常用数组方法
May 06 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
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
PHP实现动态柱状图改进版
2015/03/30 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
Javascript操作cookie的函数代码
2012/10/03 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
python使用pil生成缩略图的方法
2015/03/26 Python
Python解析最简单的验证码
2016/01/07 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
python实现决策树
2017/12/21 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
出国签证在职证明范本
2014/11/24 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
原告代理词范文
2015/05/25 职场文书
成绩单家长意见
2015/06/03 职场文书
九年级化学教学反思
2016/02/22 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android
Go语言 详解net的tcp服务
2022/04/14 Golang
python解析照片拍摄时间进行图片整理
2022/07/23 Python