JavaScript_javascript スキルで記述されたカスタム ポップアップ ダイアログ コード

下の図は私の設計アイデアです

以下は特定の JS コードです
1. まず、いくつかのカスタム関数を定義します
コード

コードをコピー コードは次のとおりです:

//配列であるかどうかを判断します
function isArray(v)
{
return v && typeof v.length == 'number' && typeof v.splice == 'function'
}
//要素を作成
function createEle(tagName)
{
return document.createElement (tagName);
}
// body に子要素を追加します
function appChild(eleName)
{
return document.body.appendChild(eleName); }
//本体から子要素を削除します
function remChild(eleName)
{
return document.body.removeChild(eleName)
}

2 , 特定フォーム実装コード
コード

コードをコピー コードは次のとおりです。

//ポップアップ ウィンドウ、タイトル (HTML フォーム)、HTML、幅、高さ、モーダル ダイアログ ボックスかどうか (true、false)、ボタン (閉じるボタンがデフォルト、形式は['button 1', fun1 , 'Button 2', fun2] 配列形式、前はボタンの値、後ろはボタンの onclick イベントです)
function showWindow(title,html,width,height,modal,ボタン)
{
//ウィンドウが小さすぎることを避ける
if (幅 {
幅 = 300;
}
if (高さ {
height = 200;
}
//マスクの幅と高さ (つまり、画面全体の幅と高さ) を宣言します
var w,h;
//可視領域の幅と高さ
var cw = document .body.clientWidth;
var ch = document.body.clientHeight
//ボディの幅と高さ
var sw = document.body.scrollWidth;
var sh = document.body.scrollHeight
//表示領域の上部と本文の上部および左側の間の距離
var st = document .body.scrollTop;
w = cw > ch:sh;ウィンドウが大きすぎるのは避けてください
if (width > w)
{
width = w;
}
if (height > h)
{
height = h;
}
//モーダルが true、つまりモーダル ダイアログ ボックスの場合、透明マスクを作成する必要があります。 'div');
mask.style.cssText = "position:absolute;left:0;top:0px;background:# fff;filter:Alpha(Opacity=30);opacity:0.5;z-index:10000 ;width:" w "px;height:" h "px;";
appChild(mask);
}
//これがメインフォームです
var win = createEle('div' );
win.style.cssText = "position:absolute;left:" (sl cw/2 - width/2) " px;top:" (st ch/2 - height/2) "px;background: #f0f0f0;z-index:10001;width:" width "px;height:" height "px;border:solid 2px #afccfe; ";
//タイトルバー
var tBar = createEle('div' );
//afccfe,dce8ff,2b2f79
tBar.style.cssText = "margin:0;width:" width "px;height:25px;background:url(top-bottom.png);cursor: move;";
//タイトルバーのテキスト部分
var titleCon = createEle('div');
titleCon.style.cssText = "float:left;margin:3px;";
titleCon.innerHTML = title;//Firefox は innerText をサポートしていないため、ここでは innerHTML が使用されます
tBar.appendChild(titleCon);
//タイトル バーの「閉じるボタン」
var closeCon = createEle('div');
closeCon.style.cssText = "float:right;width:20px;margin:3px;cursor:pointer; ";//cursor:hand は Firefox
closeCon では使用できません。 innerHTML = "×";
tBar.appendChild(closeCon);
win.appendChild(tBar);
//フォーム CSS のオーバーフローにより、コンテンツのサイズが制限されるとスクロール バーが表示されます。
var htmlCon = createEle('div');
htmlCon.style.cssText = "text-align:center; width:" width "px;height:" (height - 50) "px ;overflow:auto;";
htmlCon.innerHTML = html;
win.appendChild(htmlCon);
//フォーム下部ボタン部分
var btnCon = createEle('div');
btnCon.style.cssText = "width:" width "px;height:25px;text-height:20px;background:url(top-bottom.png);text-align:center;padding-top:3px;";
//パラメータ button が配列の場合、カスタム ボタンが作成されます
if (isArray(buttons))
{
var length = button.length
if (length > ; 0)
{
if (length % 2 == 0)
{
for (var i = 0 ; i {
//ボタン配列
var btn = createEle('button');
btn.innerHTML = button[i];//firefox value 属性はサポートされていないため、ここでは innerHTML が使用されます
// btn .value = button[i];
btn.onclick = button[i 1];
btnCon.appendChild(btn);
/ ユーザーはボタン間のスペースを埋めます
var nbsp = createEle( 'label');
nbsp.innerHTML = "  ";
}
}
}
}
;デフォルトの閉じるボタン
var btn = createEle('button');
// btn.setAttribute("value","close");
btn.innerHTML = 'Close'; btn.value = '閉じる';
btnCon.appendChild(btnCon);
appChild(win ); // マウス滞在の X 座標
var MouseX = 0; // マウス滞在の Y 座標
var MouseY = 0; // フォームから上部までの距離body
var toTop = 0;
//フォームからボディの左側までの距離
var toLeft = 0;
//フォームを移動できるかどうかを決定します。 moveable = false;
//タイトルバーのマウスダウンイベント
tBar.onmousedown = function()
{
var eve = getEvent();
moveable = true ; MouseX = eve.clientX;
mouseY = eve.clientY;
toLeft = parseInt(win.style.left);イベント
tBar.onmousemove = function()
{
if(moveable)
{
var eve = getEvent();
var x = toLeft eve.clientX - MouseX; 🎜>var y = toTop eve.clientY - MouseY;
if (x > 0 && (x width 0 && (y height {
win.style.left = x "px";
win.style.top = y "px";
}
}
//マウスイベントを置きます。これは tBar ではなくドキュメントであることに注意してください。
document.onmouseup = function()
{
moveable = false;
}
}
// IE および Firefox と互換性のあるブラウザ イベントを取得するメソッド
function getEvent()
{
return window.event ||
}
/ /上部タイトルバーと下部ボタンバーの「閉じるボタン」のCloseイベント
btn.onclick = closeCon.onclick = function()
{
remChild(win); remChild(マスク);
}
}

インスタンス呼び出し

コードをコピーコードは次のとおりです。

str = "フォームの効果を見てください"
showWindow('My プロンプト ボックス',str,850,250,true,['region',fun1) ,'ミネラルタイプ ',fun2]);

定義と呼び出しを含む、より完全で実用的なコード

コードは次のとおりです:

";
str = "请选择矿种：" addCheckbox('all','全（不）选','class_all','selectAll(this,"class_cb")') "";
str = "";
str = "";
str = "";
str = "

" addCheckbox('class_cb','铋','class_cb1') "	" addCheckbox('class_cb','钒','class_cb2') "	" addCheckbox('class_cb','金','class_cb3') "	" addCheckbox('class_cb','煤','class_cb4') "	" addCheckbox('class_cb','锰','class_cb5') "	" addCheckbox('class_cb','钼','class_cb6') "	" addCheckbox('class_cb','铅','class_cb7') "	" addCheckbox('class_cb','石膏','class_cb8') "	" addCheckbox('class_cb','石煤','class_cb9') "	" addCheckbox('class_cb','锑','class_cb10') "
" addCheckbox('class_cb',' ','class_cb11') "	" addCheckbox('class_cb','铜','class_cb12') "	"钨','class_cb13') "	" addCheckbox('class_cb','锡','class_cb14') "	"锌','class_cb15') "	" addCheckbox('class_cb','银','class_cb16') "	"萤石','class_cb17') "	" addCheckbox('class_cb','铀','class_cb18') "	" '稀土氧化物','class_cb19') "	" addCheckbox('class_cb','重結晶石','class_cb20') "
" addCheckbox('class_cb','硼','class_cb21') "	" addCheckbox('class_cb','磷','class_cb22') "	" addCheckbox('class_cb','水泥灰岩','class_cb23') "	" addCheckbox('class_cb','熔剂灰岩','class_cb24') "	" addCheckbox('class_cb','冶金白云岩','class_cb25') "	" addCheckbox('class_cb','岩盐','class_cb26') "	" addCheckbox('class_cb','芒硝','class_cb27') "	" addCheckbox('class_cb','钙芒硝','class_cb28') "	" addCheckbox('class_cb','地下水','class_cb29') "	" addCheckbox('class_cb','地下熱水','class_cb30') "

";
showWindow('我的提案框',str,850,250,true,['地区',fun1,'矿种',fun2]);
}
function selectAll(obj,oName)
{
var checkboxs = document.getElementsByName(oName);
for(var i=0;i{
checkboxs[i].checked = obj.checked;
}
}
function getStr(cbName)
{
var cbox = document.getElementsByName(cbName);
var str = "";
for (var i=0;i{
if(cbox[i].checked)
{
str = "," cbox[i] 。価値;
}
}
str = str.substr(1);
文字列を返します。
}
関数 fun1()
{
var str = getStr('cities_cb');
alert('你选择的地区範囲：' str);
}
関数 fun2()
{
var str = getStr('class_cb');
alert('你选择的矿种範囲：' str);
}