javascript弹出层输入框(示例代码)


Posted in Javascript onDecember 11, 2013

如下所示:

   <script language="javascript" type="text/javascript"> 
        function alertWin(title, msg, w, h) {             var titleheight = "22px"; // 窗口标题高度 
            var bordercolor = "#666699"; //窗口的边框颜色 
            var titlecolor = "#FFFFFF"; // 窗口的标题颜色 
            var titlebgcolor = "#666699"; // 窗口的标题背景色 
            var bgcolor = "#FFFFFF"; // 内容背景色 
            var iWidth = document.documentElement.clientWidth; //这个窗口的宽度 
            var iHeight = document.documentElement.clientHeight; //这个窗口的高度 
            //背景层的格式 
            var bgObj = document.createElement("div"); 
            bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:" + iWidth + "px;height:" + Math.max(document.body.clientHeight, iHeight) + "px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:1000;"; 
            document.body.appendChild(bgObj); 
            var iframe2 = document.createElement("iframe"); 
            iframe2.style.cssText = "position:absolute; top:0px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000; z-index:1001; border-style:none; border-width:0px; border:0px;width:" + iWidth + "px;height:" + iHeight + "px"; 
            bgObj.appendChild(iframe2); 
            //创建一个弹出层 
            var msgObj = document.createElement("div"); 
            //设置弹出的层的样式 
            msgObj.style.cssText = "position:absolute;font:11px '宋体';top:" + (iHeight - h) / 2 + "px;left:" + (iWidth - w) / 2 + "px;width:" + w + "px;height:" + h + "px;text-align:center;border:1px solid " + bordercolor + ";background-color:" + bgcolor + ";padding:1px;line-height:22px;z-index:1001;"; 
            document.body.appendChild(msgObj); 
            //创建一个table用于容纳层上的内容 
            var table = document.createElement("table"); 
            //将Table放到弹出层上 
            msgObj.appendChild(table); 
            //设置table的格式 
            table.style.cssText = "margin:0px;border:0px;padding:0px;"; 
            table.cellSpacing = 0; 
            //插入一行用于显示标题 
            var tr = table.insertRow(-1); 
            //插入一个单元格用于容纳标题 
            var titleBar = tr.insertCell(-1); 
            titleBar.style.cssText = "width:100%;height:" + titleheight + "px;text-align:left;padding:3px;margin:0px;font:bold 13px '宋体';color:" + titlecolor + ";border:1px solid " + bordercolor + ";cursor:move;background-color:" + titlebgcolor; 
            titleBar.style.paddingLeft = "10px"; 
            //设置标题 
            titleBar.innerHTML = title; 
            //设置曾德拖动事件 
            var moveX = 0; 
            var moveY = 0; 
            var moveTop = 0; 
            var moveLeft = 0; 
            var moveable = false; 
            var docMouseMoveEvent = document.onmousemove; 
            var docMouseUpEvent = document.onmouseup; 
            //鼠标点击标题 
            titleBar.onmousedown = function() { 
                var evt = getEvent(); 
                moveable = true; 
                moveX = evt.clientX; 
                moveY = evt.clientY; 
                moveTop = parseInt(msgObj.style.top); 
                moveLeft = parseInt(msgObj.style.left); 
                //鼠标拖动 
                document.onmousemove = function() { 
                    if (moveable) { 
                        var evt = getEvent(); 
                        var x = moveLeft + evt.clientX - moveX; 
                        var y = moveTop + evt.clientY - moveY; 
                        if (x > 0 && (x + w < iWidth) && y > 0 && (y + h < iHeight)) { 
                            msgObj.style.left = x + "px"; 
                            msgObj.style.top = y + "px"; 
                        } 
                    } 
                }; 
                document.onmouseup = function() { 
                    if (moveable) { 
                        document.onmousemove = docMouseMoveEvent; 
                        document.onmouseup = docMouseUpEvent; 
                        moveable = false; 
                        moveX = 0; 
                        moveY = 0; 
                        moveTop = 0; 
                        moveLeft = 0; 
                    } 
                }; 
            } 
            //关闭按钮事件 
            var closeBtn = tr.insertCell(-1); 
            closeBtn.style.cssText = "cursor:pointer; text-align:right;padding:2px;background-color:" + titlebgcolor; 
            closeBtn.innerHTML = "<span style='font-size:15pt;color:" + titlecolor + ";'>×</span>"; 
            closeBtn.onclick = function() { 
                document.body.removeChild(bgObj); 
                document.body.removeChild(msgObj); 
            } 
            //弹出的消息窗口内容 
            var msgBox = table.insertRow(-1).insertCell(-1); 
            msgBox.style.cssText = "font:10pt '宋体';"; 
            msgBox.colSpan = 2; 
            msgBox.innerHTML = msg; 
            //层上模板名称的内容 
            var nameBox = table.insertRow(-1); 
            var nameLable = nameBox.insertCell(-1); 
            nameLable.style.cssText = "font:12pt '宋体';text-align:center;"; 
            nameLable.innerHTML = "<br/>输入身份证号:<br/>"; 
            var nametext = nameBox.insertCell(-1); 
            nametext.style.cssText = "font:12pt '宋体';text-align:Left; margin-left:0px"; 
            nametext.innerHTML = "<br/><input type='text' value='' id='modalName'/>   <br/>"; 
            //层上动作按钮的内容 
            var submitBox = table.insertRow(-1); 
            var submitBtn = submitBox.insertCell(-1); 
            submitBtn.style.cssText = "text-align:center;"; 
            submitBtn.colSpan = 2; 
            submitBtn.innerHTML = "<br/><input type='Button' value='确 定' id='saveHeader'onclick='return GetCark()' /><br/>"; 
            function getEvent() { 
                return window.event || arguments.callee.caller.arguments[0]; 
            } 
        } 
    </script> 
<input type="button" value="存储表头" onclick="alertWin('身份信息采集','',300,150);" />
Javascript 相关文章推荐
Prototype 工具函数 学习
Jul 23 Javascript
javascript下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
Javascript 通过json自动生成Dom的代码
Apr 01 Javascript
js下通过prototype扩展实现indexOf的代码
Dec 08 Javascript
js如何判断输入字符串长度
Dec 16 Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
Dec 25 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
Mar 22 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
深入理解javascript中defer的作用
Dec 11 #Javascript
如何实现修改密码时密码框显示保存到cookie的密码
Dec 10 #Javascript
JQuery页面的表格数据的增加与分页的实现
Dec 10 #Javascript
jquery动态加载select下拉框示例代码
Dec 10 #Javascript
关于jquery中全局函数each使用介绍
Dec 10 #Javascript
jquery对ajax的支持介绍
Dec 10 #Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 #Javascript
You might like
基于xcache的配置与使用详解
2013/06/18 PHP
将php数组输出html表格的方法
2014/02/24 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
用JS操作FRAME中的IFRAME及其内容的实现代码
2008/07/26 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
2012/05/14 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
2016/05/16 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
jQuery Pagination分页插件使用方法详解
2017/02/28 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
js实现轮播图特效
2020/05/28 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
Python3中exp()函数用法分析
2019/02/19 Python
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
社区敬老月活动实施方案
2014/02/17 职场文书
物流管理专业毕业生求职信
2014/03/23 职场文书
小学运动会通讯稿
2015/07/18 职场文书
通讯稿范文
2015/07/22 职场文书
python如何做代码性能分析
2021/04/26 Python
浅谈MySQL之select优化方案
2021/08/07 MySQL