自定义 div 弹窗，遮罩层

css 样式

<style>
	.remarksBox{
		position:fixed;  
		left:50%;
		margin-left:-100px;
		top:50%;
		margin-top:-50px;
		border: 1px solid red;
		width: 200px;
		height: 100px;
		display: none;
		text-align: center;
		z-index: 1000;/* 要比遮罩层大 */
	}
	/* 遮罩层 */
	.mask{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.5);
		display: none;
		z-index: 999;
	}
</style>

html 代码

<div class="remarksBox">
			<textarea class="remarksInfo" name="remarksInfo" value=""></textarea>
			<!--<input type="" class="remarksInfo" name="remarksInfo" value="" /><br/>-->
			<input type="button" class="commit" name="commit" value="commit"/>
			<input type="button" class="cancel" name="cancel" value="cancel"/>
		</div>
		<div class="mask"></div>

js 代码

function showRemarks(){
			$(".remarksBox").show();
		}
		$(function(){
			$(".commit").click(function(){
				$(".remarksBox").hide();
			});
			$(".cancel").click(function(){
				$(".remarksBox").hide();
			})
		})