比如像这样的页面,前段时间自己在写的时候不是很会,然后问了学姐,然后自己上网查找了下资料。然后知道了这样的写法。上面是这样的效果。
讲解:
在上面点击第二张中的“点击获取优惠券”然后弹出这样的对话框,背景变成灰色。
第二个页面就不讲解了,关键是第一个页面
<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" οnclick="page_coupons.hidPhone()">'
+ '<input type="text" name="phone" class="phone">'
+ '<div class="confirm" οnclick="$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后就行啦,这样效果就出来了!
/纯属个人理解,还请多多指教///