通過(guò)Javascript創(chuàng)建一個(gè)選擇文件的對(duì)話框代碼
更新時(shí)間：2012年06月16日 01:56:16 作者：
通過(guò)Javascript創(chuàng)建一個(gè)選擇文件的對(duì)話框代碼，需要的朋友可以參考下
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, "請(qǐng)選擇Excel文檔!");
}
//關(guān)閉并移除彈窗
NeatDialog.prototype.close = function () {
if (this.elt) {
this.elt.style.display = "none";
this.elt.parentNode.removeChild(this.elt);
}
window.neatDialog = null;
}
//創(chuàng)建彈窗
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;
}
}
效果：
復(fù)制代碼 代碼如下:
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 代碼 ：
復(fù)制代碼 代碼如下:
//打開彈窗
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, "請(qǐng)選擇Excel文檔!");
}
//關(guān)閉并移除彈窗
NeatDialog.prototype.close = function () {
if (this.elt) {
this.elt.style.display = "none";
this.elt.parentNode.removeChild(this.elt);
}
window.neatDialog = null;
}
//創(chuàng)建彈窗
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;
}
}
效果：
相關(guān)文章
JS使用 cryptojs加密解密(對(duì)稱加密庫(kù))的問(wèn)題
js 加密解密可以使用 crypto-js,這是一個(gè)對(duì)稱加密的庫(kù), 可以使用 AES DES 但沒(méi)有 rsa 等非對(duì)稱加密的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-11-11
Ionic 是目前最有潛力的一款 HTML5 手機(jī)應(yīng)用開發(fā)框架。通過(guò) SASS 構(gòu)建應(yīng)用程序，它 提供了很多 UI 組件來(lái)幫助開發(fā)者開發(fā)強(qiáng)大的應(yīng)用。接下來(lái)小編給大家介紹如何安裝 Ionic 在自己的電腦上搭建一個(gè)簡(jiǎn)單的小應(yīng)用，感興趣的朋友一起看看吧2016-06-06
這篇文章主要介紹了Servlet返回的數(shù)據(jù)js解析2種方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
es6學(xué)習(xí)之解構(gòu)時(shí)應(yīng)該注意的點(diǎn)
解構(gòu)賦值允許你使用類似數(shù)組或?qū)ο笞置媪康恼Z(yǔ)法將數(shù)組和對(duì)象的屬性賦給各種變量。這種賦值語(yǔ)法極度簡(jiǎn)潔，同時(shí)還比傳統(tǒng)的屬性訪問(wèn)方法更為清晰，下面這篇文章主要給大家介紹了關(guān)于在es6解構(gòu)時(shí)應(yīng)該注意的點(diǎn)，需要的朋友可以參考下。2017-08-08
在javascript中實(shí)現(xiàn)函數(shù)數(shù)組的方法
js不進(jìn)行類型檢查，數(shù)組可以存放任何東西。于是我就想數(shù)組里可否存放函數(shù)呢，下面就為大家詳細(xì)介紹下2013-12-12
詳解JavaScript中Canvas的高級(jí)繪圖和動(dòng)畫技術(shù)
JavaScript中的Canvas 是一個(gè)強(qiáng)大的 HTML5 元素,允許你通過(guò)編程方式創(chuàng)建圖形、繪制圖像和實(shí)現(xiàn)復(fù)雜的動(dòng)畫效果,在本文中,我們將深入探討 JavaScript Canvas 的高級(jí)繪圖和動(dòng)畫技術(shù),并提供一個(gè)復(fù)雜的案例,以展示其潛力,需要的朋友可以參考下2023-10-10
本篇文章主要是對(duì)js獲取當(dāng)前頁(yè)面路徑的示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
這篇文章主要為大家詳細(xì)介紹了js代碼編寫無(wú)縫輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
微信小程序?qū)崿F(xiàn)頂部選項(xiàng)卡(swiper)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)頂部選項(xiàng)卡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10