通过Javascript创建一个选择文件的对话框代码
2018-10-12 13:55
736 查看
CSS 样式:
Javascript 代码 :
效果:
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创建一个选择文件的对话框代码
- 个人学习代码保存:例10.通过模板创建静态页面的操作文件的一个自定函数
- 如何在JSP页面中通过一个按钮,在对话框中选择一个目录而不是选择一个文件;input type=file只能选择一个文件,我想选择一个目录;做不出来项目经理要扣奖金的...............
- javascript显示选择目录对话框的代码
- orca 创建select file browse 选择文件自定对话框
- windows Installer创建选择文件自定对话框
- 通过Eclipse创建一个Project ,Java Project 和Tomcat Project 生成的目录和文件
- 自动根据视频文件类型选择不同播放器的JAVASCRIPT代码
- 第一章 基础 (续 通过代码和配置文件写一个WCF服务)
- 如何通过命令行或者使用代码打开一个apk文件
- 一个可以记住上一次的选择的选择目录的对话框的实现代码段
- 利用javascript使html的file不可手动输入文件路径,只可通过[浏览]按钮选择
- 一个WinForm记事本程序(包含主/下拉/弹出菜单/打开文件/保存文件/打印/页面设置/字体/颜色对话框/剪切版操作等等控件用法以及记事本菜单事件/按键事件的具体代码)
- WCF基础 (续 通过代码和配置文件写一个WCF服务)
- 做了一个上传组件以后,在IE中通过以下代码限制上传文件类型为jpg和png:
- MFC的...打开一个对话框 要求获取文件路径的代码
- JavaScript创建Checkbox,IE6一个弱智bug对代码的影响
- javascript操作两个选择列表(有两个列表,如何实现在一个列表通过双击和多选列表中内容添加到另一个列表. )
- MFC打开一个对话框 要求获取文件路径的代码
- 一个WinForm记事本程序(包含主/下拉/弹出菜单/打开文件/保存文件/打印/页面设置/字体/颜色对话框/剪切版操作等等控件用法以及记事本菜单事件/按键事件的具体代码)