通过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脚本代码跑起来。
Jan 09 Javascript
编辑浪子版表单验证类
May 12 Javascript
JavaScript库 开发规则
Jan 31 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
js图片自动轮播代码分享(js图片轮播)
May 06 Javascript
Javascript动态创建表格及删除行列的方法
May 15 Javascript
jQuery鼠标事件汇总
Aug 30 Javascript
将json转换成struts参数的方法
Nov 08 Javascript
Vue.2.0.5过渡效果使用技巧
Mar 16 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 Javascript
微信小程序的授权实现过程解析
Aug 02 Javascript
Openlayers学习之地图比例尺控件
Sep 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与ASP
2006/10/09 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
js跨浏览器实现将字符串转化为xml对象的方法
2013/09/25 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
Javascript基础知识(三)BOM,DOM总结
2014/09/29 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
jquery实现折叠菜单效果【推荐】
2017/03/08 Javascript
webpack2.0配置postcss-loader的方法
2017/08/17 Javascript
JS库中的Particles.js在vue上的运用案例分析
2017/09/13 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
python tornado使用流生成图片的例子
2019/11/18 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
python集合能干吗
2020/07/19 Python
python3中数组逆序输出方法
2020/12/01 Python
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
违反课堂纪律检讨书
2014/01/19 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
松材线虫病防治方案
2014/06/15 职场文书
2014年英语工作总结
2014/12/20 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书
Redis实战高并发之扣减库存项目
2022/04/14 Redis