js弹出div层内容(按回退键关闭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%;
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=" 33.30%;">姓名</span>'+
'<span style=" 33.30%;">单数</span>'+
'<span class="mui-pull-right"style=" 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=" 33.30%;">'+list_name[i]+'</span>'+
'<span style=" 33.30%;">'+list_num[i]+'</span>'+
'<span class="mui-pull-right"style=" 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=" 100%; margin-top:0px;text-align: center; color: white;background-color: #1C86EE;z-index:99">'+
'<span class="mui-pull-left"style=" 33.30%;">菜名</span>'+
'<span style=" 33.30%;">数量</span>'+
'<span class="mui-pull-right"style=" 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=" 33.30%;">'+name+'</span>'+
'<span style=" 33.30%;">'+num+'</span>'+
'<span class="mui-pull-right"style=" 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";