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 相关文章推荐
Web表单提交之disabled问题js解决方法
Jan 13 Javascript
JavaScript实现文字跟随鼠标特效
Aug 06 Javascript
javascript手风琴下拉菜单实现代码
Nov 12 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
使用vue-cli编写vue插件的方法
Feb 26 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 Javascript
Vue点击切换颜色的方法
Sep 13 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 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
一个PHP的String类代码
2010/04/20 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
PHP中soap用法示例【SoapServer服务端与SoapClient客户端编写】
2018/12/25 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
通过身份证号得到出生日期和性别的js代码
2009/11/23 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
2016/07/09 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
python实现计算倒数的方法
2015/07/11 Python
Python 25行代码实现的RSA算法详解
2018/04/10 Python
Python if语句知识点用法总结
2018/06/10 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
Python当中的array数组对象实例详解
2019/06/12 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
奖学金自我鉴定范文
2013/10/03 职场文书
大学毕业自我评价
2014/02/02 职场文书
劲霸男装广告词
2014/03/21 职场文书
2014教师研修学习体会
2014/07/08 职场文书
业务内勤岗位职责
2015/04/13 职场文书
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP