<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="btn">点击</div>
<div class="aa" style="display:none;width:200px;height:20px;margin: 20px auto;background:green;"></div>
</body>
<script src="../js/jquery-1.11.3.min.js"></script>
<script>
var timer=null;
$(".btn").on("click",function(){
$(".aa").fadeIn();
timer=window.setTimeout(function(){
clearTimeout(timer);
$(".aa").fadeOut();
},5000)
})
</script>
</html>
点击显示内容框，5秒后自动消失
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
height:2100px;
}
.msg-layer-bg{
display: none;
position: fixed;
top: 0;
left: 0;
width:100%;
height:100%;
background:rgba(0,0,0,.5);
}
.msg-layer{
display: none;
position: fixed;
padding:5px 10px;
border: 1px solid #ccc;
background:#fff;
}
.msg-layer h5{
font-size: 16px;
padding:5px;
}
.msg-con{
font-size:13px;
padding: 10px;
}
.msg-close{
position: absolute;
right:5px;
top:5px;
font-size:18px;
color:red;
cursor: pointer;
}
</style>
</head>
<body>
<div class="btn">点击</div>
<div class="msg-layer-bg"></div>
<div class="msg-layer">
<h5>我是标题</h5>
<div class="msg-con">
我是内容
</div>
<div class="msg-close">×</div>
</div>
</body>
<script src="../js/jquery-1.11.3.min.js"></script>
<script>
$(function(){
function msg_layer(tit,con){
var _layer=$(".msg-layer");
_layer.css("display","block");
_layer.find("h5").html(tit);
_layer.find($(".msg-con")).html(con);
var winH=$(window).height(),winW=$(window).width(),_layerW=_layer.outerWidth(),_layerH=_layer.outerHeight();
$(".msg-layer-bg").css({"display":"block"});
_layer.css({"left":winW/2-_layerW/2,"top":winH/2-_layerH/2});
}
$(".btn").on("click",function(){
msg_layer("标题，，，","内容内")
});
$(".msg-close").on("click",function(){
$(".msg-layer-bg,.msg-layer").css({"display":"none"});
})
})
</script>
</html>