なんとなくメモ

2012年7月13日金曜日

画面全体をマスクするサンプル（作りかけ）

http://www.whims-d.com/archives/223　
を参考にしてみました。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
        <script>

            function mask(){
                    var mask = $('<div id="top-mask"></div>');
                    mask.css({
                            'position':     'absolute',
                            'top':             0,
                            'left':            0,
                            'width':        $(document).width(),
                            'height':        $(document).height(),
                            'color':        '#ffffff',
                            'background':    '#000000',
                            'display':        'none',
                            'opacity':        0,
                            'zIndex':        9999
                    });
                    mask.click(function(e) {
            $('#top-mask').css({zIndex:$.browser.msie?0:null}).fadeOut("fast");
                    });
                    //    同IDのマスクが存在しない場合にマスクDOMを追加
                    if(! $('#top-mask').size()) {
                            $('body').append(mask);
                    }
                    $('#top-mask').css({'opacity':0,'display':'block'}).fadeTo('fast', 0.5);
            }


        </script>
    </head>
    <body>
        <div><input type="button" value="mask" onclick="javascript:mask();"/></div>
    </body>
</html>

0 件のコメント:

コメントを投稿