通过Javascript创建一个选择文件的对话框代码


Posted in Javascript onJune 16, 2012

CSS 样式:

DIV.neat-dialog-cont { 
Z-INDEX: 98; BACKGROUND: none transparent scroll repeat 0% 0%; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100% 
} 
DIV.neat-dialog-bg { 
Z-INDEX: -1; FILTER: alpha(opacity=70); LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%; BACKGROUND-COLOR: #eee; opacity: 0.7; 
} 
DIV.neat-dialog { 
BORDER-RIGHT: #555 1px solid; BORDER-TOP: #555 1px solid; Z-INDEX: 99; MARGIN-LEFT: 35%; BORDER-LEFT: #555 1px solid; WIDTH: 300px; MARGIN-RIGHT: auto; 
BORDER-BOTTOM: #555 1px solid; POSITION: relative; TOP: 25%; BACKGROUND-COLOR: #fff 
} 
DIV.neat-dialog-title { 
PADDING-RIGHT: 0.3em; PADDING-LEFT: 0.3em; FONT-SIZE: 1em; PADDING-BOTTOM: 0.1em; MARGIN: 0px; LINE-HEIGHT: 1.2em; PADDING-TOP: 0.1em; BORDER-BOTTOM: #444 
1px solid; POSITION: relative;background: #36C;color:White; 
} 
DIV.neat-dialog P { 
PADDING-RIGHT: 0.2em; PADDING-LEFT: 0.2em; PADDING-BOTTOM: 0.2em; PADDING-TOP: 0.2em; TEXT-ALIGN: center 
}

Javascript 代码 :
//打开弹窗 
function f_OpenDialog() { 
var sHTML = '<p><input id="txtFile" type="file" /></p>' + 
'<p><input id="btnYes" type="button" onclick="f_ReadExcel();" value="确定">' + 
'<button id="btnNo" onclick="window.neatDialog.close();">取消</button></p>'; 
new NeatDialog(sHTML, "请选择Excel文档!"); 
} 
//关闭并移除弹窗 
NeatDialog.prototype.close = function () { 
if (this.elt) { 
this.elt.style.display = "none"; 
this.elt.parentNode.removeChild(this.elt); 
} 
window.neatDialog = null; 
} 
//创建弹窗 
function NeatDialog(sHTML, sTitle) { 
window.neatDialog = null; 
this.elt = null; 
if (document.createElement && document.getElementById) { 
var dg = document.createElement("div"); 
dg.className = "neat-dialog"; 
if (sTitle) 
sHTML = '<div class="neat-dialog-title">' + sTitle + '</div>\n' + sHTML; 
dg.innerHTML = sHTML; 
var dbg = document.createElement("div"); 
dbg.id = "nd-bdg"; 
dbg.className = "neat-dialog-bg"; 
var dgc = document.createElement("div"); 
dgc.className = "neat-dialog-cont"; 
dgc.appendChild(dbg); 
dgc.appendChild(dg); 
if (document.body.offsetLeft > 0) { 
dgc.style.marginLeft = document.body.offsetLeft + "px"; 
} 
document.body.appendChild(dgc); 
this.elt = dgc; 
window.neatDialog = this; 
} 
}

效果:
通过Javascript创建一个选择文件的对话框代码
Javascript 相关文章推荐
THREE.JS入门教程(1)THREE.JS使用前了解
Jan 24 Javascript
jquery text(),val(),html()方法区别总结
Nov 04 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
Jquery通过JSON字符串创建JSON对象
Aug 24 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
Sep 17 Javascript
js获取会话框prompt的返回值的方法
Jan 10 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
jquery实现手风琴效果
Nov 20 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
Jan 17 Javascript
js实现表格筛选功能
Jan 18 Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
Jun 15 #Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 #Javascript
jQuery操作input type=radio的实现代码
Jun 14 #Javascript
jQuery操作 input type=checkbox的实现代码
Jun 14 #Javascript
基于jQuery的遍历同id元素 并响应事件的代码
Jun 14 #Javascript
jQuery操作select的实例代码
Jun 14 #Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 #Javascript
You might like
php中存储用户ID和密码到mysql数据库的方法
2013/02/06 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
让Firefox支持event对象实现代码
2009/11/07 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
js实现导航跟随效果
2018/11/17 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
js回文数的4种判断方法示例
2019/06/04 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
Python的Urllib库的基本使用教程
2015/04/30 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
[原创]赚疯了!转手立赚800+?大佬的python「抢茅台脚本」使用教程
2021/01/12 Python
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
BOSE德国官网:尽探索之力,享音乐之极
2016/12/11 全球购物
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
Marlies Dekkers内衣法国官方网上商店:国际知名的荷兰内衣品牌
2019/03/18 全球购物
英国儿童设计师服装和玩具购物网站:Zac & Lulu
2020/10/19 全球购物
关于国庆节的演讲稿
2014/09/05 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
优秀教师个人材料
2014/12/15 职场文书
python实现Nao机器人的单目测距
2021/09/04 Python
JS实现九宫格拼图游戏
2022/06/28 Javascript