JavaScriptコードスニペット：ダイアログ風のウインドウを表示する

titleにタイトル、htmlに内部に表示するHTML、okにOKボタンを押したときのアクション(関数)、cancelにキャンセルボタンを押したときのアクション(関数)をセットして呼び出すと、画面中央にダイアログ風の小ウインドウが表示されます。

以下のサンプルではＯＫ・キャンセルボタンを押したときのアクションを指定せず、単にダイアログを閉じるだけとしています。

【サンプル】

(function(title, text, ok, cancel) {
    var frameColor = "#CCCCCC";
    var bgColor = "#E0E0E0";
    var frame = document.body.appendChild(document.createElement("div"));
    var head = frame.appendChild(document.createElement("div"));
    head.style.padding = "1px 3px";
    head.style.color = "black";
    head.style.backgroundColor = frameColor
    head.innerHTML = title;
    var body = frame.appendChild(document.createElement("div"));
    body.innerHTML = text;
    var foot = frame.appendChild(document.createElement("div"));
    foot.style.textAlign = "center";
    foot.style.margin = "5px 0px";
    var button = document.createElement("input");
    button.type = "button"; //IEではappendChildした後にtypeの値が設定できないようです。
    foot.appendChild(button);
    button.value = "ＯＫ";
    button.style.width = "100px";
    button.style.border  = "1px solid gray";
    button.style.marginRight = "5px";
    button.onclick = function() { if (ok) ok(); frame.parentNode.removeChild(frame); }
    button = document.createElement("input");
    button.type = "button"; //IEではappendChildした後にtypeの値が設定できないようです。
    foot.appendChild(button);
    button.value = "キャンセル";
    button.style.width = "100px";
    button.style.border  = "1px solid gray";
    button.onclick = function() { if (cancel) cancel(); frame.parentNode.removeChild(frame); }
 
    frame.style.border = "2px outset " + frameColor;
    frame.style.backgroundColor = bgColor;
    frame.style.position = "fixed";
    frame.style.left = "50%";
    frame.style.top = "50%";
    frame.style.marginLeft = (-frame.offsetWidth / 2) + "px";
    frame.style.marginTop = (-frame.offsetHeight / 2) + "px";
})('サンプルダイアログ', '<div style="font-size:32pt;text-align:center;padding:20px;">サンプルです</div>');

【サンプルの実行】 → クリックしてください

JavaScriptコードスニペットへ

javascript