制作提示框的要点就是：
先要清除当提示框出现，下层的页面内容不能操作。这里就需要分层，第一层页面，第二层遮盖页面层。
不过下面的代码我用了三层：页面+遮盖层+以及弹窗。
emmm弹窗的样子有点儿丑，凑合看吧~~~
废话不多说了：一波代码~~~
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>自定义弹窗</title>
<script src="jquery/jquery-1.9.1.js"></script>
<script src="jquery/jquery-1.9.1.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
.container{
width: 100%;
height:640px;
}
.popwindow{
position: absolute;
left:50%;
top:50%;
margin-top: -100px;
margin-left: -100px;
z-index: 4;
width: 200px;
height: 200px;
background-color: rgb(211, 171, 255);
text-align: center;
padding:20px ;
}
p{
margin:5px 25px 10px 25px ;
width: 150px;
border-top:1px #af5fff solid ;
}
.word{
width: 170px;
margin:5px 15px 10px 15px ;
height:130px ;
background-color: rgb(255, 209, 213);
}
.wbtn{
border-style: none;
background-color: rgba(255, 123, 56, 0.71);
display: inline-flex;
justify-content: center;
padding: 2px 3px 2px 3px;
border-radius: 5%;
}
.win{
position: absolute;
z-index: 2;
width: 100%;
height:640px;
display:none;
}
.ceng{
position: absolute;
z-index: 3;
width: 100%;
height:640px;
background-color: rgba(220, 220, 220, 0.45);
}
.btnc{
position: absolute;
z-index: 1
}
</style>
</head>
<body>
<div class="container">
<div class="btnc"><button class="btn">点我</button>
<span>点击显示内容:</span>
</div>
<div class="win">
<div class="ceng"></div>
<div class="popwindow">
<h4>通知</h4>
<p></p>
<div class="word">
<h5></h5>
<h1></h1>
</div>
<button class="wbtn">确定</button>
</div>
</div>
</div>
<script>
$(function(){
var num=0
$('.btn').click(function(){
if($('.win').css('display')==='none'){
$('.win').css('display','block');
num++;
$a=$('span').text();
$('h5').text($a);
$('h1').text(num);
}
})
$('.wbtn').click(function(){
if($('.win').css('display')==='block'){
$('.win').css('display','none')
}
})
})
</script>
</body>
</html>