通过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 31 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 Javascript
node.js中的console.log方法使用说明
Dec 09 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 Javascript
深入理解vue Render函数
Jul 19 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
Aug 24 Javascript
记一次用ts+vuecli4重构项目的实现
May 21 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 Javascript
javascript实现时钟动画
Dec 03 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
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
Yii2框架自定义验证规则操作示例
2019/02/08 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
js实现表单多按钮提交action的处理方法
2015/10/24 Javascript
jQuery简单倒计时效果完整示例
2016/09/20 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
React快速入门教程
2017/01/17 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
javaScript中的空值和假值
2017/12/18 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
2018/07/24 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
python检测IP地址变化并触发事件
2018/12/26 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
Python的高阶函数用法实例分析
2019/04/11 Python
python微信撤回监测代码
2019/04/29 Python
使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件及出现问题解决方法
2019/09/06 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
公民授权委托书
2014/10/15 职场文书
基石观后感
2015/06/12 职场文书
60句有关成长的名言
2019/09/04 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python
解决Redis启动警告问题
2022/02/24 Redis
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js