Bugle Diary: [jQuery]レイヤーで背景を覆う

2011/04/29

[jQuery]レイヤーで背景を覆う

ありがちなwebページに、ページ全体をレイヤーで覆う処理がありますが、こんな感じかなーというのができたので、その紹介

<html>
<head>
<script 
  type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"
>
</script>
</head>
<body>
<input type="button" value="Run" id="run">
<script type="text/javascript">
(function($){
  var div = $("<div>");
  div.css("top",0);
  div.css("left",0);
  div.css("position","absolute");
  div.css("z-index",999999990);
  div.css("display","none");
  div.css("background-color","#000000");
  $("body").append(div);
  function resizeLayer(args){
    if(!$.support.noCloneEvent){
      div.css("width",$("body").width()-21);
      div.css("height",$("body").height()-4);
    }else{
      if(!$.support.checkOn){
        div.css("height",$("body").height());
        div.css("width",$("body").width());
      }else{
          div.css("height",$(document).height());
          div.css("width",$(document).width());
      }
    }
  }
  $(window).bind("resize",function(){
    resizeLayer();
  });

  $.fn.backendLayer = function(){
    resizeLayer();
    div.css("display","block");
    return this;
  }

  div.bind("click",function(){
    alert("foo1");
    div.css("display","none");
  });
}(jQuery))

jQuery("#run").bind(
  "click",
  jQuery("#run").backendLayer
);

</script>
</body>
</html>

これでレイヤー関係は怖くないぞと。

Bugle Diary

2011/04/29

[jQuery]レイヤーで背景を覆う

0 コメント:

コメントを投稿

Blog内検索

ラベル

アーカイブ