javascript遮罩层 js弹出div出现遮罩层

<!--弹出的div列表对应的详情-->
			<div id="newhtml" class="white_content">
				<div style="height: 5%;">
					<ul class="mui-table-view" id="cd_ul_top">
					</ul>
				</div>
				<div style="top:5%;overflow:auto;height:95%;">
					<ul class="mui-table-view" style="height: 100%;" id="cd_ul">
					</ul>
				</div>
			</div>
			<!--结合div的遮罩层-->
			<div id="fade" class="black_overlay"> 
			</div> 如下是弹出div和遮罩层的样式.初始默认为隐藏.
.black_overlay{ 
display: none; 
			  	position: fixed;  
			  	top: 0;
			    right: 0;
			    bottom: 0;
			    left: 0;
			    z-index: 998;//该属性如果不写,如果div的position属性值为fixed,则会出现遮罩层盖不住的情况
			  	background-color: black;  
			  	opacity:.35;			}  
			.white_content {  
		  		display: none;  
		  		position: fixed;  
		  		top: 40%;  
		  		width: 100%;  
		  		height: 30px;  
		  		background-color: white;  
		  		z-index:1002; 
		  		text-align: center;
		  	} mui实例中统计图显示:mychart.setOption();
//使用刚制定的配置和数据显示图表
				mychart.setOption(option);
				getli(list_dc_id,list_num,list_sum,list_name);//生成li列表,用mui设置每个li的监听事件,.this.id获取该li标签的动态id,,this.innerHTML查看li标签内的内容(子标签的所有内容).this.outerHTML显示整个li标签的所有内容(包括自己的所有内容)
		function getli(list_dc_id,list_num,list_sum,list_name){
			var ul_li = document.getElementById('ul_li');
			if(list_num==""&&list_sum==""&&list_name==""){
				ul_li.innerHTML="";
			}else{
				var ul_li_html = '<li class="mui-table-view-cell mui-col-xs-12" style="text-align: center;" >'+
				'<span class="mui-pull-left"style="width: 33.30%;">姓名</span>'+
				'<span style="width: 33.30%;">单数</span>'+
				'<span class="mui-pull-right"style="width: 33.30%;">金额</span></li>';

				for(var i = 0;i<list_name.length;i++){
					var li_html='<li class="mui-table-view-cell mui-col-xs-12" style="text-align: center;"id='+list_dc_id[i]+'>'+
					'<span class="mui-pull-left"style="width: 33.30%;">'+list_name[i]+'</span>'+
					'<span style="width: 33.30%;">'+list_num[i]+'</span>'+
					'<span class="mui-pull-right"style="width: 33.30%;">'+list_sum[i]+'</span></li>';
					ul_li_html+=li_html;
				}
				ul_li.innerHTML=ul_li_html;
			}
		}如下图,通过监听li标签,设置div层和遮罩层样式display属性值为block.显示div和遮罩层
//菜单列表ul_li的监听
		mui('#ul_li').on('tap','li',function(){
			var dc_id = this.id;
			if(dc_id==""){
				return;
			}
			//传统ajax的post请求方式
			mui.ajax('http://192.168.1.23:8080/YSE/back/queryapp_getFoodSale.action', {
				data: {
					type: type,
					user:dc_id,
					date: nd,
					token: token
				},
				dataType: 'json', //服务器返回json格式数据
				type: 'post', //HTTP请求类型
				success: function(data) {
					//服务器返回响应，根据响应结果，分析是否登录成功；
					if(data == null) {
						mui.toast('服务器连接失败，请重新尝试!!!');
					}else if(data==""){
						mui.toast('未查询到该点餐数据!!!');
					}else if(data == '1') {//成功
					}else{
						var newData = JSON.stringify(data);//在这里stringfy()的作用是用于将一个对象解析成字符串
						var newData2 = eval（'('+newData+')');
						var newhtml = '<li class="mui-table-view-cell mui-col-xs-12" style=" width:100%; margin-top:0px;text-align: center; color: white;background-color: #1C86EE;z-index:99">'+
							'<span class="mui-pull-left"style="width: 33.30%;">菜名</span>'+
							'<span style="width: 33.30%;">数量</span>'+
							'<span class="mui-pull-right"style="width: 33.30%;">金额</span></li>';
						var li_html="";
						for(var i = 0;i<newData2.length;i++){
							var name = newData2[i].name;
							var num = newData2[i].num;
							var sum = newData2[i].sum;
							li_html += '<li class="mui-table-view-cell mui-col-xs-12" style="text-align: center;">'+
							'<span class="mui-pull-left"style="width: 33.30%;">'+name+'</span>'+
							'<span style="width: 33.30%;">'+num+'</span>'+
							'<span class="mui-pull-right"style="width: 33.30%;">'+sum+'</span></li>';
						}
						document.getElementById('cd_ul_top').innerHTML = newhtml;
						document.getElementById("cd_ul").innerHTML = li_html;
						document.getElementById('newhtml').style.display='block';
						document.getElementById('fade').style.display='block';
					}
				},
				error: function(xhr, type, errorThrown) {
					//异常处理；
					console.log(xhr + "," + type + "," + errorThrown);
					mui.toast("服务器连接异常!!!");
				}
			});
		});利用mui框架设置手机回退按键功能.如果div属性为block,点击回退执行操作:设置属性none隐藏div层和遮罩层,否则继续执行回退按键回退webview操作.
第二个为监听点击遮罩层,同样隐藏div层和遮罩层
 //回退按钮
var oldBack = mui.back;
mui.back = function(event) {
if(document.getElementById('newhtml').style.display=='block'){
document.getElementById('newhtml').style.display='none';
document.getElementById('fade').style.display='none';
return false;
}else{
oldBack();
}
};
document.getElementById('fade').addEventListener('tap',function(){
document.getElementById('newhtml').style.display='none';
document.getElementById('fade').style.display='none';})
//弹出层后,设置样式,禁止底部滑动:
主要是设置html和body两个标签的overflow属性:hidden超出部分隐藏.实现不能滑动
.noscroll{
				height: 100%;
				overflow: hidden;
			}//添加属性class="noscroll",禁止滑动
					document.getElementsByTagName('html')[0].className="noscroll";
					document.getElementsByTagName('body')[0].className="noscroll";