首页 > jquery > jquery浮层效果第一版

jquery浮层效果第一版

2010年8月19日 luo

js代码：

$(function(){
 var dialogLayer = $('#dialogLayer');
 var dialogBox = $('#dialogBox');
  dialogLayer.hide();
  dialogBox.hide();
  var pageH = $(document.body).height(); //获取页面文档的高度赋值给pageH
  var pageW = $(document.body).width(); //获取页面文档的宽度赋值给pageW
  var winH = $(window).height();//获取窗口可视区域的的高度赋值给winH
  var maxH = Math.max(winH,pageH);//winH 和 pageH 进行比较取得最大的值赋给maxH
  var dialogBox_x = (pageW - dialogBox.width())/2;//计算出dialogBox的x坐标
  var dialogBox_y = (winH - dialogBox.height())/2;//计算出dialogBox的y坐标
//给按钮绑定click事件，点击弹出浮层
  $(':button').click(function(){
       dialogLayer.show().width(pageW).height(maxH);
      dialogBox.show().css({'top':dialogBox_y+'px','left':dialogBox_x+'px'});
   });
//关闭浮层
  $('#close').click(function(){
      dialogBox.hide();
      dialogLayer.hide();
   });
});

css代码：

*{ margin:0px; padding:0px;}
body{ font-size:12px;}
.wrapper{ width:940px; border:1px solid #ccc; padding:10px; margin:0 auto; clear:both;}
.wrapper p{ line-height:24px;}
#dialogLayer{ position:absolute; background-color:#000; filter:alpha(opacity=60); opacity:0.6; left:0; top:0;}
#dialogBox{ position:absolute; width:400px; height:300px; border:3px solid blue; background-color:#fff; left:0; top:0;}
#dialogBox h2{ height25px; line-height:25px; color:#fff; font-size:12px; background-color:blue; padding:0 10px;}
#dialogBox h2 span{ float:right; font-weight:normal; cursor:pointer;}
.content{ padding:20px; text-align:center;}

html代码：

<div id="dialogLayer"></div>
<div id="dialogBox">
<h2><span id="close" title="关闭">关闭</span>请您登录</h2>
<div class="content">content</div>
</div>
<div style="text-align:center;"><input type="button" value="点击弹出登陆框" /></div>

运行下面的代码可以查看效果：

提示：你可以先修改部分代码再运行。

分类: jquery 标签:
  1. coo
    2010年8月19日11:33 | #1
    回复 | 引用

    完美路过

  2. 淘宝网首页
    2010年8月19日14:57 | #2
    回复 | 引用

    哈哈 看了 貌似不是沙发

  3. web前端寒风
    2010年8月27日10:37 | #3
    回复 | 引用

    在ie6下不能达到预期效果，Firefox下是可以的

  4. Renea Lueth
    2010年8月27日20:19 | #4
    回复 | 引用

    Good article, Every and every Stage is good enough.Many thanks for sharing with us your wisdom.

  5. phoenix
    2010年8月29日00:08 | #5
    回复 | 引用

    如果超过一屏肯定是不行的

  6. luo
    2010年8月30日11:13 | #6
    回复 | 引用

    ie6我测试没问题呀，能否告知详情？

  7. emul
    2010年8月31日00:50 | #7
    回复 | 引用

    果然内涵。。。

  1. 本文目前尚无任何 trackbacks 和 pingbacks.
本文的评论功能被关闭了.