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

jquery实现弹出即消失的提示层

2014-07-18 09:02 567 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8"/>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
$("#dv").slideToggle(200);
setTimeout(function () {
$("#dv").hide(200);
}, 3000);
});

});
</script>
<style type="text/css">
div.RoundedCorner
{
background: #C8E2FA;
}
b.rtop, b.rbottom
{
display: block;
background: #FFFFFF;
}
b.rtop b, b.rbottom b
{
display: block;
height: 1px;
overflow: hidden;
background: #C8E2FA;
}
b.r1
{
margin: 0 5px;
}
b.r2
{
margin: 0 3px;
}
b.r3
{
margin: 0 2px;
}
b.rtop b.r4, b.rbottom b.r4
{
margin: 0 1px;
height: 2px;
}

#dv
{
width: 300px;

position: absolute;
top: 10px;
left: 39%;
z-index: 10001;
padding: 0;
}
.shade
{
display: none;
}
</style>
</head>
<body>
<div id="dv" class="shade">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4">
</b></b>
<div style=" height:100px; text-align:center; background-color:#C8E2FA;">
<br /><br />
<div style="height:30px; font-weight: bold; font-size:16px; background-color:#C8E2FA;">

修改成功!

</div>
</div>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2">
</b><b class="r1"></b></b>
</div>
<input type="button" id="btn" value="点击" />
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航