弹出对话框的同时出现遮罩层

最近的项目有留言板弹出对话框，然后我就自己写了一个静态的，下面是我的代码

<div class="fade"></div>
		<div class="succ-pop">
			<h2 class="title">
			      这里是要填写的内容
			</h2>
		</div>

/*灰色遮罩层*/
			.fade {
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.5);
				position: fixed;
				left: 0;
				top: 0;
				z-index: 2;
			}
			/*弹出层*/
			.succ-pop {
				width: 400px;
				height: 300px;
				background: #fff;
				position: fixed;/*这里的定位可以根据自己喜好选择absolute或者fixed*/
				left: 50%;	
				top: 50%;/*这里的top根据自己的需要定*/
				margin-left: -200px;
				margin-top: -150px;
				z-index: 3;
				border-radius: 5px;
				box-shadow: 0 1px 3px rgba(0,0,0,.3);
			}
			.succ-pop h2.title {
				text-align: center;
				color: lightskyblue;
			}

　　如果你不希望有弹框的时候页面还会滚动，那就加上$('body').css('overflow-y','hidden');就可以了