通过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 相关文章推荐
用 javascript 实现的点击复制代码
Mar 24 Javascript
DIV外区域Click后关闭DIV的实现代码
Dec 21 Javascript
window.open的页面如何刷新(父页面)上层页面
Dec 28 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
Nov 29 Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 Javascript
Vue常用指令V-model用法
Mar 08 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 Javascript
vue-cli3配置与跨域处理方法
Aug 17 Javascript
JavaScript动画实例之粒子文本的实现方法详解
Jul 28 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中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
在JavaScript中正确引用bind方法的应用
2015/05/11 Javascript
学习JavaScript设计模式(多态)
2015/11/25 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
Vue实现验证码功能
2019/12/03 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
用Python进行一些简单的自然语言处理的教程
2015/03/31 Python
TF-IDF算法解析与Python实现方法详解
2017/11/16 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
python2和python3哪个使用率高
2020/06/23 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
html5 canvas手势解锁源码分享
2020/01/07 HTML / CSS
vivo智能手机官方商城:vivo
2016/09/22 全球购物
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
大学生个人自荐信
2014/02/24 职场文书
合作投资意向书
2014/04/01 职场文书
自强之星事迹材料
2014/05/12 职场文书
品牌服务方案
2014/06/03 职场文书
政府法律服务方案
2014/06/14 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
检讨书范文500字
2015/01/28 职场文书
罚款通知怎么写
2015/04/22 职场文书
仰望星空观后感
2015/06/10 职场文书
Github 使用python对copilot做些简单使用测试
2022/04/14 Python