你的位置:快乐忆站 \ 前端 \ 文章正文

jQuery弹出层

感觉已经没什么好写的了,3天没有更新了,让我懒人的细胞变得更懒了...两天一更新的频率被打破了,悲剧鸟~大四了,工作的鸭梨使得有时候想写却不知道写什么,想想自己的未来还不知道在哪,心里不禁又悬了一块石头。我其实不想从事本专业工作,但是又觉得很矛盾,一直找不到方向,这也导致鸭梨进一步变大。

哎呀,不管鸟,继续折腾我的代码吧~今天来分享一个jQuery的弹出层效果,具体什么用你看完会懂的,(*^__^*) 嘻嘻……(有点邪恶哈~)

注:非IE内核浏览器请直接右击复制代码,IE内核浏览器请双击复制代码!

jQuery代码:(必须先加载jQuery库,怎么加载我就不说鸟~)

<script type="text/javascript">
function popup(){ //弹出层主代码
    var maskHeight = $(document).height(); 
    var maskWidth = $(window).width();//之前的document.body.clientWidth是不对的,我错鸟~谢踏雪和小邪
    var dialogTop =  $(window).scrollTop() + ($('#dialog-box').height()/3);
    var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2);
    $('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();
    $('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();   
}
$(function(){
$('#close,#dialog-overlay').click(function(){$('#dialog-overlay,#dialog-box').hide();});//隐藏弹出层
$(window).resize(function(){if(!$('#dialog-box').is(':hidden')) popup();});//窗口大小改变时改变弹出层的位置
$('#box').click(function(){popup();});//单击时触发弹出层事件
})
</script>

css代码:(很重要,没有的话不会有效果!)

#dialog-overlay{width:100%;height:100%;background:#000;position:absolute;top:0;left:0;z-index:4000;display:none;filter:alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6}
#dialog-box{display:none;background:#f7f7f7;width:328px;position:absolute;z-index:5000}
.dialog-content{padding:10px;margin:13px;color:#666;text-align:center}
#close{margin:10px auto 0 auto;text-align:center;background-color: #e33100;display: block;width:50px;padding: 5px 10px 6px;color: #fff}

html代码:(位置随意的,在<body>,</body>内即可)

<div id="dialog-overlay"></div>
<div id="dialog-box">
<div class="dialog-content">
<div id="dialog-message">
//你自己的内容
</div>
<a href="javascript:void(0);" id="close">关闭</a>
</div>
</div>

查看demo

你懂的,尽管拿去做坏事吧~\(≧▽≦)/~

« 上一篇

说两句吧:

*

*

正在回复: 取消

  1. 162#
    sean
    sean 2011-05-29 18:28 回复
    怎么把代码复制到dw里,预览时页面是空的啊....期待回答啊
    小松
    小松 2011-05-29 18:49 回复
    @sean:明显,你必须加入自己的内容才有效啊
  2. 161#
    朵未
    朵未 2011-04-26 21:39 回复
    小松,我想点文字下载,弹出这个层该怎么改呢?有时间再回答。
  3. 160#
    零上16度
    零上16度 2011-02-27 23:16 回复
    很不错
    小松
    小松 2011-02-28 10:39 回复
    @零上16度:哈哈,真的吗,希望你能用上~
  4. 159#
    小A
    小A 2010-12-13 16:50 回复
    小松大哥,我一直想要你这个下载附件弹出的效果,请问这个Div这段到底是要改模板文件中的哪个啊!?moudle.php中的附件下载么!?实在是折腾不起来了,求助!~
    小松
    小松 2010-12-13 22:45 回复
    @小A::-)咱现在也没空呢
  5. 158#
    电脑人生
    电脑人生 2010-11-24 12:03 回复
    我拿去试试!!!!
    小松
    小松 2010-11-24 12:09 回复
    @电脑人生:你也要用?
    电脑人生
    电脑人生 2010-11-24 15:47 回复
    @小松:有这想法
    小松
    小松 2010-12-13 22:45 回复
    @电脑人生:那就用呗~
    菜鸟
    菜鸟 2011-06-01 13:58 回复
    这个留言板是怎么做的啊?
  6. 157#
    小松
    小松 2010-09-25 14:31 回复
    @alexin:还行吧,看你怎么用了~
  7. 156#
    alexin
    alexin 2010-09-25 13:29 回复
    这个效果不错,很实用。
  8. 155#
    小松
    小松 2010-09-23 20:50 回复
    @踏雪残情:我在IE8下看到了滚动条...
  9. 154#
    踏雪残情
    踏雪残情 2010-09-23 19:48 回复
    回复77楼小松:IE7没看到水平滚动条。
  10. 153#
    小松
    小松 2010-09-23 00:49 回复
    @踏雪残情:可是可怜的IE出现了水平滚动条...
1 2 3 4 5 6 ... »

随机日志:

推荐日志:

彩色标签:

sitemap