您的位置：首页 > Web前端 > JQuery

使用jQuery制作模态框

2016-06-20 15:35 525 查看

html

<body>
<a href="">点击显示模态框</a>
<div id="cover">
<div id="cover-bg"></div>
<div id="cover-content"></div>
</div>
</body>

css

a{
font-size: 25px;
}
#cover{
display: none;
position: absolute;
z-index: 5;
top: 50%;
left: 50%;
}
#cover-bg{
width: 100%;
height: 100%;
background-color: #aaa;
opacity: 0.7;
-webkit-opacity: 0.7;
z-index: 5;
position: absolute;
top: 0;
left: 0;
}
#cover-content{
background-color: #009900;
z-index: 8;
position: absolute;
top: 40%;
left: 40%;
}

js

$(function(){
$("a").click(function(e){
e.preventDefault();
$("#cover").css("display","block");
$("#cover").animate({
width: "100%",
height: "100%",
top: "0",
left: "0"
},800);
$("#cover-content").animate({
width: "300px",
height: "300px",
},800);
});
$("#cover-bg").click(function(){
$("#cover").removeAttr("style");
$("#cover-content").removeAttr("style");
});
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航