通过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获取鼠标点击元素对象(示例代码)
Dec 20 Javascript
javascript数组遍历for与for in区别详解
Dec 04 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
May 07 Javascript
7个去伪存真的JavaScript面试题
Jan 07 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
微信小程序中转义字符的处理方法
Mar 28 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
关于layui 下拉列表的change事件详解
Sep 20 Javascript
Vue v-bind动态绑定class实例方法
Jan 15 Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 Javascript
如何用Node.js编写内存效率高的应用程序
Apr 30 Javascript
ElementUI实现el-form表单重置功能按钮
Jul 21 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
程序员编程十条戒律
2009/07/09 PHP
phpmail类发送邮件函数代码
2012/02/20 PHP
PHP开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
EasyUI中的tree用法介绍
2011/11/01 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
bootstrap手风琴制作方法详解
2017/01/11 Javascript
学习使用Bootstrap栅格系统
2017/05/11 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
详解javascript对数组和json数组的操作
2019/04/15 Javascript
vue实现计步器功能
2019/11/01 Javascript
React生命周期原理与用法踩坑笔记
2020/04/28 Javascript
python抓取并保存html页面时乱码问题的解决方法
2016/07/01 Python
python中关于for循环的碎碎念
2017/06/30 Python
Python中pillow知识点学习
2018/04/30 Python
python解析含有重复key的json方法
2019/01/22 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
python opencv实现图像配准与比较
2021/02/09 Python
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
介绍下java.util.Arrays类
2012/10/16 面试题
初中考试作弊检讨书
2014/02/01 职场文书
普罗米修斯教学反思
2014/02/06 职场文书
消费者投诉书范文
2015/07/02 职场文书
团队拓展训练感想
2015/08/07 职场文书
Java集成swagger文档组件
2021/06/28 Java/Android
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python