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 相关文章推荐
优化innerHTML操作(提高代码执行效率)
Aug 20 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
AngularJS教程之环境设置
Aug 16 Javascript
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
浅谈Angular路由复用策略
Oct 04 Javascript
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
JavaScript中的一些实用小技巧总结
Apr 07 Javascript
详解微信小程序网络请求接口封装实例
May 02 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 Javascript
vue总线机制(bus)知识点详解
May 10 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不用递归实现无限分级的例子分享
2014/04/18 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
Bootstrap4如何定制自己的颜色和风格
2018/02/26 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
2018/11/14 Javascript
原生js实现贪食蛇小游戏的思路详解
2019/11/26 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
Threejs实现滴滴官网首页地球动画功能
2020/07/13 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
Python使用scrapy采集数据时为每个请求随机分配user-agent的方法
2015/04/08 Python
python字符串对其居中显示的方法
2015/07/11 Python
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
Python @property及getter setter原理详解
2020/03/31 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
美国Max仓库:Max Warehouse
2020/05/31 全球购物
企业挂职心得体会
2014/09/10 职场文书
整改报告怎么写
2014/11/06 职场文书
英语通知范文
2015/04/22 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
学会掌握自己命运的十条黄金法则:
2019/08/08 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL