ページはかなり見苦しく、機能のみが実装されています。 ^ ^
次のようにコードをコピーします。
<title>easyui ダイアログの効果を模倣する</title>
<スクリプト>
//ページ要素を取得する
var getElement = function() {
document.getElementById(arguments[0]) を返します || false;
}
関数 openDialog(dialogId) {
var マスク ID = "マスク";
// 存在する場合は、最初に元のものを削除します
if (getElement(dialogId)) {
document.removeChild(getElement(dialogId));//削除操作: ポップアップ div
}
if (getElement(maskId)) {
document.removeChild(getElement(maskId));//削除操作: ポップアップ操作不能 (マスク) レイヤー
}
// 背景はグレーアウトされます
varマスクDiv = document.createElement("div");
マスクDiv.id = マスクID;
マスクDiv.style.position = "絶対";
マスクDiv.style.zIndex = "1";
マスクDiv.style.width = document.body.scrollWidth + "px";
マスクDiv.style.height = document.body.scrollHeight + "px";
マスクDiv.style.top = "0px";
マスクDiv.style.left = "0px";
マスクDiv.style.background = "グレー";
マスクDiv.style.filter = "アルファ(不透明度=10)";
MaskDiv.style.opacity = "0.30";//透明度
document.body.appendChild(maskDiv);//本文に背景レイヤーを追加します
//ダイアログ
var DialogDiv = document.createElement("div");
ダイアログDiv.id = ダイアログID;
ダイアログDiv.style.position = "絶対";
ダイアログDiv.style.zIndex = "9999";
ダイアログDiv.style.width = "400px";
ダイアログDiv.style.height = "200px";
DialogDiv.style.top = (parseInt(document.body.scrollHeight) - 200) / 2 + "px" // 画面を中央に配置します。
DialogDiv.style.left = (parseInt(document.body.scrollWidth) - 400) / 2 + "px" // 画面を中央に配置します。
ダイアログDiv.style.background = "白";
DialogDiv.style.border = "1px ソリッドグレー";
DialogDiv.style.padding = "5px";
DialogDiv.innerHTML = "(ダイアログコンテンツ)";
//ダイアログでのクローズ操作: 背景レイヤーとダイアログレイヤーを閉じます
var closeControlloer = document.createElement("a");//ハイパーリンクを作成します（閉じるためのトリガーとして）
closeControlloer.href = "#";
closeControlloer.innerHTML = "閉じる";
closeControlloer.onclick = function() {
document.body.removeChild(getElement(dialogId));//ダイアログを削除
document.body.removeChild(getElement(maskId));//背景レイヤーを削除
}
DialogDiv.appendChild(closeControlloer);//「閉じる」操作をダイアログに追加します
document.body.appendChild(dialogDiv);//本文にダイアログを追加
}
</script>
<a href="#" onclick="openDialog('dialog');">ダイアログを開く</a>