Benjamin - 专注前端开发和用户体验

移动端模拟弹窗二三事

JAVASCRIPT Benjamin 3312℃ 0评论

移动端模拟弹窗时,遇到一些问题,现总结如下,以加深记忆。

情况一:
当body高度大于viewport高度时,在弹窗上滑动时,会遇到body也跟着滑动的现象。

解决思路:
禁止touchmove,及overflow:hidden来实现,参考下面代码:

/**
 * 初始化弹窗
 */
var initDialog = (function() {
    var _tmpl = baidu.template('dialog-tpl', {});

    return {
        tmpl : $(_tmpl),

        /**
         * [create 创建弹窗]
         * @return {[type]} [description]
         */
        create: function() {
            var me = this,
                _tmpl = me.tmpl;

            $('body')

            // 禁用鼠标滚轮滚动
            .css('overflow', 'hidden')

            .append(_tmpl)

            // 禁止touchmove,阻止body滑动
            .on('touchmove', function(e) {
                e.preventDefault();
            })

            // 关闭动作
            .on('tap', 'dialog-close', function() {
                me.destroy();
            })
        },

        /**
         * [destroy 销毁弹窗]
         * @return {[type]} [description]
         */
        destroy: function() {
            this.tmpl.remove();

            // 解除touchmove绑定、启用滚动
            $('body').off().css('overflow', 'auto');
        }
    }
})();

情况二:
软键盘弹起时,自定弹窗不能铺满全屏

解决思路:
打开弹窗前,通过javascript的blur事件来收起软键盘。
$(“:focus”).blur();

情况三:
实现toast组件时,如果toast使用
position: fixed;bottom:-3rem;即离底部比较近时,按照我们正常想法应该是键盘把页面往上推,但是在IOS及Andriod UC浏览器中会出现toast被键盘覆盖,即使我们设置z-index也无济于事,因为键盘在整个浏览器的上层。

解决思路:
出现toast的时候,监听所有控件的事件,当focus时,动态计算当前位置,重新计算。但是有个问题,不同机型键盘的高度不统一。M端部分参考代码:

<style type="text/css">
    body {
        text-align: center;
    }
    input[type=text] {
        width: 80%; 
        height: .8rem;
        margin-top: .3rem;
    }
    .toast {
        position: fixed; 
        bottom: .3rem; 
        left: 50%; 
        margin-left: -1rem; 
        width: 2rem; 
        height: 1rem; 
        background-color: #f00; 
        border-radius: 10px;
        color: #fff;
    }
</style>
<input type="text">
<div class="toast">Toast</div>
喜欢 (1)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 这个问题遇到过,一直没解决的是移动端弹框注册,因为表单太长了,需要滑动,但是遮罩层下面的内容也会跟着滑动。禁止的话,弹框就划不动了。。。很是郁闷,每次滑动还得小心翼翼。。。
    bcoder2016-08-01 11:56 回复