JavaScriptコードスニペット：画面一杯に広がる半透明の要素を配置する

ユーザインタフェースの１つに、モーダルダイアログと呼ばれる画面の各部品を無効にしてダイアログの操作のみを有効にするものがあります。 JavaScriptでいえば、alert()、confirm()、prompt()などがそれにあたります。ですが、これらの関数では表示できる内容に制限があり、もうちょっとなんとかならないのかと忸怩たる思いをすることが少なくありません。

このプログラムでは、そういったJavaScriptで自前のモーダルダイアログを実現するための一歩として、画面を半透明にしてロックする機能を提供します。何かキーを押すことによりロック状態を解除します。

【サンプル】

(function() {
    var getsize= function(node) {
        return { dwidth : node.clientWidth, dheight : node.clientHeight, width : node.scrollWidth, height : node.scrollHeight };
    };
    var wsize = getsize(document.documentElement);
    var frame = document.body.appendChild(document.createElement("div"));
    if (frame.style.setExpression) { //IE
      frame.style.position = "absolute";
      frame.style.setExpression('top', 'y=(document.documentElement.scrollTop)+"px"');
      frame.style.setExpression('left', 'x=(document.documentElement.scrollLeft)+"px"');
    } else {
      frame.style.position = "fixed";
    }
    frame.style.left = "0px";
    frame.style.top = "0px";
    frame.style.width = wsize.dwidth + "px";
    frame.style.height = wsize.dheight + "px";
    frame.style.backgroundColor = "gray";
    frame.style.opacity = 0.5;
    frame.style.filter = "alpha(opacity=50)";
    window.onresize = function() {
        var wsize = getsize(document.documentElement);
        frame.style.width = wsize.dwidth + "px";
        frame.style.height = wsize.dheight + "px";
    }
    document.onkeydown = function() {
        document.onkeydown = null;
        frame.parentNode.removeChild(frame);
    }
})();

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

JavaScriptコードスニペットへ

javascript