zoukankan      html  css  js  c++  java
  • 关于ios的safari下,页面底部弹出登陆遮罩层,呼出软键盘时 问题解决

    前阵子遇到了一个问题,就是手机端页面弹出遮罩+底部登陆的弹出层。

    一般情况下就直接给fixed固定定位了,然而做测试时发现了一个很大的问题 

    iOS的safari下,固定定位会跑到整个页面的最底部,而不是当前页的最底部。

    查了好多百度然而还是没有找到有用的解决方案,后来问了一位前端的大神,大神说这种情况下,需要区分两种状态,

    一是默认状态,即 除了safari之外的其他浏览器(需要判断一下浏览器是否为safari)

    二是 safari浏览器状态下,(由于公司只要求测UC,QQ浏览器,顾,发现  在ios下的QQ浏览器里,判断时也会得出是safari,所以在写判断时,注意处理下手机QQ浏览器)

    先写判断浏览器的事件:

    function myBrowser(){ 
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 
    var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") < 1 && userAgent.indexOf("MQQ") < 0; //判断是否Safari 
    //alert(userAgent);
    if(isSafari){ return "Safari"; }
    }

    然后在写具体弹出的事件

    //========点击。。弹出弹出框=================

    //========点击。。弹出弹出框=================
        //index-个人中心       默认安卓
        $(".ic_per").click(function() {
         //safari
    if(myBrowser()=="Safari"){ // alert("这是safari"); A.zhezhao(); $('#login_box').fadeIn(500); $("html,body,.mask-layer").height($(window).height()); $(".mask-layer").height($(document).height()); $('.mask-layer').css('position', 'absolute'); var dltop = $(document).scrollTop() + $(window).height() - 275; $("#login_box").height($(document).height()); console.log(dltop); console.log($("#login_box").height()); $('#login_box').css({ "position": "absolute", "top": dltop + "px", "height": $(document).height() }); }
         //其他浏览器
    else { // alert("这是別的"); A.zhezhao_in(); //弹出框系列 $('#login_box').fadeIn(500); $("body,.mask-layer").height($(window).height()); } });

    阿西吧,然而还是有些细节问题跟默认情况下不一样   还好产品大大没有再死抠这个问题。。。
  • 相关阅读:
    PHP编程基础学习(一)——数据类型
    6-6 带头结点的链式表操作集(20 分)
    6-5 链式表操作集(20 分)
    6-4 链式表的按序号查找(10 分)
    6-3 求链式表的表长(10 分)
    6-2 顺序表操作集(20 分)
    6-1 单链表逆转(20 分)
    学生成绩管理系统(六):项目总结
    学生成绩管理系统(五):系统的完善与数据库的链接
    学生成绩管理系统(四)
  • 原文地址:https://www.cnblogs.com/weiliang-song/p/6217936.html
Copyright © 2011-2022 走看看