使用JQuery把元素Div弹出与关闭

来源：互联网发布：java 无参数构造方法编辑：程序博客网时间：2024/06/03 03:28

HTML代码：

<!--弹窗 --><div class="theme-popover1">  </div><div class="theme-popover-mask"></div>

CSS代码：

.theme-popover-mask {    z-index: 9998;    position:fixed;    top:0;    left:0;    width:100%;    height:100%;    background:#000;    opacity:0.4;    filter:alpha(opacity=40);    display:none}.theme-popover1 {    z-index:9999;    position:fixed;    top:50%;    left:5%;    width:75%;    height:325px;    margin:-200px 0 0 86px;    border-radius:5px;    border:solid 2px #666;    background-color:#fff;    display:none;    box-shadow: 0 0 10px #666;}

JavaScript代码：

function open(){    $('.theme-popover-mask').fadeIn(100);    $('.theme-popover1').slideDown(200);}function close(){    $('.theme-popover-mask').fadeOut(100);    $('.theme-popover1').slideUp(200);}

JS代码示例：

$("#open").click(function() {    open();});$("#close").click(function() {    close();});

0 0