夜游鹰
夜游鹰
  • 发布:2017-07-24 16:40
  • 更新:2017-07-24 16:40
  • 阅读:1714

监听a元素tap事件后js调用显示popover层,但是遮屏后不显示内容;

分类:MUI

详细问题描述
最近在用开源项目灰狐修改成商城app,本意是想加入购物车成功后,弹出一个菜单选择立即结算还是留在本页,发现如下问题,由于只有两个选项,暂时改成确认框将就一下。
监听a元素tap事件进行ajax请求,返回后js调用显示popover层,遮屏后不显示内容;
添加一个用描点显示该popover层的<a>元素测试正常;
代码如下:
<footer class="mui-bar mui-bar-tab">
<a class="mui-btn mui-btn-primary mui-pull-right" id='cart'>
加入购物车
</a>
<a href="#popover" class="mui-btn mui-btn-red mui-pull-right" id="buy">
立即购买
</a>
</footer>

点击“立即购买”能正常显示弹出层popover,点击 加入购物车,后只遮住屏幕,不弹出内容;
多次测试发现,先点击“立即购买”弹出popover层,点击空白处隐藏弹出层后再点击加入购物车能弹出popover层,但是位置是在原来的位置,即点 立即购买 显示的位置,不是在加入购物车的位置。

popover代码,mui文档中直接复制过来的;
<div id="popover" class="mui-popover">
<ul class="mui-table-view">
<li class="mui-table-view-cell"><a href="#">Item1</a></li>
<li class="mui-table-view-cell"><a href="#">Item2</a></li>
<li class="mui-table-view-cell"><a href="#">Item3</a></li>
<li class="mui-table-view-cell"><a href="#">Item4</a></li>
<li class="mui-table-view-cell"><a href="#">Item5</a></li>
</ul>
</div>
监听和返回js代码
var cart = document.getElementById('cart');
var needlogin = document.querySelector('.need-login');
cart.addEventListener('tap',function(){
logData(localStorage.getItem('user'));
//判断用户是否已经登录,已经登录就需要去获取购物车列表
if (localStorage.getItem('user')) {
//将登录按钮隐藏,并且去获取购物车列表或则更新购物车列表todo
needlogin.style.display = 'none';

                var fs = document.querySelectorAll('.mui-content-padded');  
                var featureids = new Array();  
                console.log(fs);  
                for (var k=0;k<fs.length;++k) {  
                    //var objft = new Object();  
                    //objft.feature_id = fs[k].getAttribute('feature_id');  
                    //objft.fv_id = fs[k].getAttribute('fv_id');  
                    featureids.push(fs[k].getAttribute('selected_id'));  
                }  
                var user = JSON.parse(localStorage.getItem('user'));                                  
                ajax_add_cart({  
                    product_id:product_id,  
                    feature_values:featureids,  
                    supplier_id:detail.supplier.supplier_id,  
                    category_id:detail.categoryID,  
                    user_id:user.website_id,  
                    num:2  
                });  

            }else {  
                //如果退出登录或者没有登录成功这个div将被显示出来。  
                needlogin.style.display = 'block';  
            }  

        },false);  
    });  

    //加入购物车返回函数  
    function addCartSuccess(data)  
    {  
        //console.log(JSON.stringify(data));  
        plus.ui.alert(data.msg);  
        //传入toggle参数,用户也无需关心当前是显示还是隐藏状态,mui会自动识别处理;  
        mui('.mui-popover').popover('show');  
    }  

联系方式
[QQ]1635809151
[电话]

2017-07-24 16:40 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复