做一个带X的弹出DIV

来源：互联网发布：面相大师知秋编辑：程序博客网时间：2024/05/22 11:37

项目的页面需要一个弹出效果，但又不能是网页，果断用一个DIV来做。

hide-data-show是弹出的div，X其实是个带链接的x。
hide-data-show2是背景遮罩。

<div class="hide-data-show"><a href="javascript:;" title="关闭" class="close">×</a></div><div class="hide-data-show2"></div>

jquery的代码如下：

    $('.data-show').click(function(){        $('.hide-data-show2').fadeIn(100);        $('.hide-data-show').slideDown(200);    })    $('.hide-data-show .close').click(function(){        $('.hide-data-show2').fadeOut(100);        $('.hide-data-show').slideUp(200);    })

CSS：

#hide-data-show{    z-index:9999;    position:fixed;    top:50%;    left:50%;    width:690px;    height:360px;    margin:-180px 0 0 -330px;    border-radius:5px;    border:solid 2px #666;    background-color:#fff;    display:none;    box-shadow: 0 0 10px #666;}#hide-data-show .close{    float:right;    color:#999;    padding:5px;    margin:-2px -5px -5px;    font:bold 14px/14px simsun;    text-shadow:0 1px 0 #ddd}#hide-data-show2{    z-index: 9997;    position:fixed;    top:0;    left:0;    width:100%;    height:100%;    background:#000;    opacity:0.4;    filter:alpha(opacity=40);    display:none}

0 0