Javascript_javascript スキルを使用してファイルを選択するためのダイアログ ボックス コードを作成する

CSS 样式:

复制代码 代码如下:

DIV.neat-dialog-cont {
Z-インデックス: 98;背景: なし透明スクロール繰り返し 0% 0%。左: 0ピクセル;幅: 100%;位置: 絶対的。トップ: 0px;高さ: 100%
}
DIV.neat-dialog-bg {
Z-INDEX: -1;フィルター: アルファ(不透明度= 70);左: 0ピクセル;幅: 100%;位置: 絶対的;トップ: 0px;高さ: 100%;背景色: #eee;不透明度: 0.7;
}
DIV.neat-dialog {
BORDER-RIGHT: #555 1px ソリッド;ボーダートップ: #555 1px ソリッド; Zインデックス: 99;マージン左: 35%;ボーダー左: #555 1px ソリッド。幅: 300ピクセル;マージン右: 自動;
ボーダーボトム: #555 1px ソリッド;位置: 相対的。トップ: 25%; BACKGROUND-COLOR: #fff
}
DIV.neat-dialog-title {
PADDING-RIGHT: 0.3em;パディング左: 0.3em;フォント サイズ: 1em;パディングボトム: 0.1em;マージン: 0px;行の高さ: 1.2em;パディングトップ: 0.1em;ボーダー下部: #444
1px ソリッド;位置: 相対;背景: #36C;色:白;
}
DIV.neat-dialog P {
PADDING-RIGHT: 0.2em;パディング左: 0.2em;パディングボトム: 0.2em;パディングトップ: 0.2em; TEXT-ALIGN: center
}

JavaScript 代码 ：

复制代 代码 如下:

//打开弹窗
function f_OpenDialog() {
var sHTML = '

< ;/p>'
'

'
'取消

';
new NeatDialog(sHTML, "请选择Excel文档!");
}
//关闭并移除弹窗
NeatDialog.prototype.close = function () {
if (this.elt) {
this.elt.style.display = "なし";
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 = "きちんとしたダイアログ";
if (sTitle)
sHTML = '

' sTitle '

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;
}
}

效果：