jquery实现弹出自定义对话框，父页面变灰

具体实现的功能是：添加商品到购物车成功，弹出提示框告诉用户，商品添加成功。选择去购物车，还是继续购物。弹出对话框之后，父页面变灰，不能操作了。

步骤一：在商品购买的页面上加上一个div,先设置这个div是不可见的。div上的内容就是你要自定义的对话框的内容。

<div id="dialog-box" class="dialog-popup">
 <a href="#" class="close"><img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
<form action="CartServlet" class="choose-dialog">
<fieldset class="textbox">
<table>
<tr>
<th>来自清风书苑的温馨提示</th>
</tr>
<tr>
<td class="dialog-td1" valign="middle">书已经成功添加到购物车，欢迎继续选购~</td>
</tr>
<tr>
<td class="dialog-td2">
<button type="submit" class="entercart">进入购物车</button>
<input type="button" class="continue" value="返回继续购物">
</td>
</tr>
</table>
</fieldset>
</form>
</div>	

步骤二：商品添加成功，正确返回时，让这个div可见，并且再设置一个div将父页面遮住。

<script type="text/javascript">
	$(function() {
		$("#add-to-cart").click(function() {
			var userinput=$("input:hidden:eq(0)").val();
			var bookid=$("input:hidden:eq(1)").val();
			var buynum=$("#buynum").val();
			
         if(userinput==null||userinput=="")
        	 {
        	  
        	 location.href="LoginUIServlet";
        	 //window.open("LoginUIServlet","登陆页面","width=400,height=300,scrollbars=no,resizable=no,location=no");
        	 //window.opener.location.reload();
        	 }
         else
        	 {
           // location.href="AddToCartServlet?bookid="+bookid+"&buynum="+buynum;
            $.post("AddToCartServlet",{'bookid':bookid,'buynum':buynum},
                    function(returnedData,status)
                    {
            	// window.open("dialog.jsp", "","height=200, width=400, top=200,left=400,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no");
            	$("#dialog-box").fadeIn(300);
            	//Set the center alignment padding + border
        		var popMargTop = ($("#dialog-box").height() + 24) / 2; 
        		var popMargLeft = ($("#dialog-box").width() + 24) / 2; 
        		
        		$("#dialog-box").css({ 
        			'margin-top' : -popMargTop,
        			'margin-left' : -popMargLeft
        		});
        		
        		// Add the mask to body
        		$('body').append('<div id="mask"></div>');
        		$('#mask').fadeIn(300);
        		
        		return false;
       });
        
        	 }
		});
		 // When clicking on the button close or the mask layer the popup closed
    	$('a.close, #mask,.continue').on('click', function() { 
    	  $('#mask , .dialog-popup').fadeOut(300 , function() {
    		$('#mask').remove();  
    	}); 
    	return false;
    	});
		});
	
</script>

步骤三：就是对应的css设置

.dialog-popup{
	display:none;
	background:#8cc6ff;
	padding: 10px; 	
	border: 2px solid #ddd;
	float: left;
	font-size: 1.2em;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	box-shadow: 0px 0px 20px #999;
	-moz-box-shadow: 0px 0px 20px #999; /* Firefox */
    -webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
	border-radius:3px 3px 3px 3px;
    -moz-border-radius: 3px; /* Firefox */
    -webkit-border-radius: 3px; /* Safari, Chrome */
    width:300px;
}
img.btn_close {
	float: right; 
	margin: -28px -28px 0 0;
}
fieldset { 
	border:none; 
}
form.choose-dialog.textbox th
{
	display:block;
	padding-top: 2px;
	text-align: left;
}
.dialog-td1
{
	display:block;
	background-color:#dfdfdf;
	padding-left:2px;
	padding-top:10px;
	height:100px;
	text-align: center;
	padding-top: 10px;
	font-size: 12px;
	width: 280px;
	vertical-align:middle;
}
.dialog-td2
{
	display:block;
	text-align: right;
}
#mask {
	display: none;
	background: #d9d9d9; 
	position: fixed; left: 0; top: 0; 
	z-index: 10;
	width: 100%; height: 100%;
	opacity: 0.8;
	z-index: 999;
}

结果如下：

参考的案例是：http://www.alessioatzeni.com/wp-content/tutorials/jquery/login-box-modal-dialog-window/index.html