弹出对话框+背景为灰色

比如像这样的页面，前段时间自己在写的时候不是很会，然后问了学姐，然后自己上网查找了下资料。然后知道了这样的写法。上面是这样的效果。

讲解：

在上面点击第二张中的“点击获取优惠券”然后弹出这样的对话框，背景变成灰色。

第二个页面就不讲解了，关键是第一个页面

<div class="content">            
　　　　　　　　<div class="Phone" style="display: none;">
                 <div class="ph"></div>
                 <div class="bg"></div>
            　</div>
</div>

HTML

	     showPhone : function(){
						if(true){
						 //console.log(1111);
							var html = '';
								html += '<div class="item">'
								 + '<div class="title">'+ "请输入正确的手机号" +'</div>'
								 + '<img src="images/aa.png" class="cancel" onclick="page_coupons.hidPhone()">'
								 + '<input type="text" name="phone" class="phone">'
								 + '<div class="confirm" onclick="$Common.tocouponsDetail()">' + "确认"
								 + '</div>'
								 + '</div>';
							$('#page_coupons .content .Phone').css('display','block');
							$('#page_coupons .content .Ph').html(html);
						}
	     }

 JS

#page_coupons .bg {
    width: 100%;
	z-index:10;
	opacity:0.7; 
	background:#6F7C84; 
	position: fixed;
	top:0px;
	bottom: 0px;
}

#page_coupons .content .ph {
   	z-index:11;
	width: 80%;
	border-radius : 6px;
	background-color: #DEDEDC;
	position: fixed;
	top:40%;
	left:10%;
}

#page_coupons .content .Phone .item  {
    border-top: 1px solid #9B9B99;
	padding: 2%;
	text-align: center;
	color:#4D4948;
	font-size: 16px;
	font-weight: bold;
}

#page_coupons .content .Phone .item .confirm {
   color : #3B335B;
   font-weight : bold;
   margin : 3px 37%;
   padding-top : 4px;
   border-radius : 3px;
   background : #F8C301;
}

#page_coupons .content .Phone .item .cancel {
   width : 8%;
   float : right;
   margin-top : -28px;
   margin-right : -14px;
}

#page_coupons .content .Phone .item  .phone {
   margin-top : 12px;
}

 CSS

当点击的时候这个事件我就不写了，点击的时候调用这个函数就行啦！

当点击之前设置"Phone"为不可见（'displey','none'），当点击后设置为（'display','block' ）

然后将要显示的div添加在Ph后就行啦，这样效果就出来了！

/////////////////////////////////////////纯属个人理解，还请多多指教///////////////////////////////////////////////////////