关于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());
        }
    });
阿西吧,然而还是有些细节问题跟默认情况下不一样   还好产品大大没有再死抠这个问题。。。
时间: 2024-08-06 03:46:16

关于ios的safari下,页面底部弹出登陆遮罩层,呼出软键盘时 问题解决的相关文章

ios弹出软键盘时fixed失效及点击空白处隐藏层的解决办法

一.实现点击按钮弹出层和点击空白处隐藏层,event.stopPropagation()是关键,阻止传导. <script type="text/javascript"> $(function () { $('#btnShow').click(function (event) { event.stopPropagation(); $('#div_apply').toggle(); }); $(document).click(function (event) { $('#di

ios上有时候提交按钮点击两次才可以取消输入框软键盘

ios上有时候提交按钮点击两次才可以取消输入框软键盘,点击第一次软键盘消失,点击第二次输入框页面消失,这样用户体验不好.我的做法是用 touchstart 代替click来处理 反应快,但是有时候会出现 输入框消失后 软键盘又弹出来了,得手动关闭软键盘才可以,这个时候给输入框一个主动取消焦点的事件就可以解决 $("..").blur();

弹出软键盘时,不把activity整体往上移,只移动部分

如图,EditText在整个activity的最下方,当弹出软键盘时,如果整个activity往上移动,会导致最上面那些部分会看不见,而中间又还有这么多空白的空间,显然不合理. 为了只移动activity中的部分空间,可以将这块部分放在ScrollView中,设置ScrollView的layout_weight="1",即让他占满空位.当弹出软键盘时,就会去移动这部分的空间了.

iOS 可高度自定义的底部弹框

技术: iOS Objective-C 概述 一个可以让开发者通过编写 tableView 的内容随心所欲的定制自己想要的底部弹框 详细 代码下载:http://www.demodashi.com/demo/14901.html 一. 运行效果图 二. 实现过程 1. 实现一个有遮罩效果的半透明 view,然后添加一个可设置展示内容高度的 contentView // 这个遮罩是可以遮住全屏 - (void)createUI{ self.frame = CGRectMake(0, 0, SS_S

jQuery点击图片弹出大图遮罩层

使用jQuery插件HoverTreeShow弹出遮罩层显示大图 效果体验:http://hovertree.com/texiao/hovertreeshow/ 在开发HoverTreeTop项目的产品展示功能过程中,因为要把产品图片的大图显示给用户看,就使用jQuery制作了一个插件:HoverTreeShow ,使用该插件可以很方便的弹出图片的大图,已经运用在项目中了,除了上面链接的示例外,HoverTreeTop项目的产品展示也是一个实例,请访问链接:http://hovertree.co

实现自己自定义的弹框和遮罩层

有的时候我们需要实现属于自己的弹框和弹出框的遮罩层效果,下面我给大家讲一下有javascript实现最简单的属于自己的弹框和弹框遮罩层效果,首先编写遮罩层的javascript,代码如下: 1.遮罩层js: //获得坐标 function getPosition() { var top = document.documentElement.scrollTop; var left = document.documentElement.scrollLeft; var height = documen

easyUI弹框被遮罩层遮挡

项目中用到easyui 布局,用到north,west,center三个区域,且在center中间区域嵌入iframe标签.在主内容区做一些小提示弹窗(例如删除前的弹窗提示确认)时,会遇到遮罩问题,由于center区域是iframe嵌套的,所以里面的小弹窗无法覆盖页面的头部和左边目录栏. 情形一.点击提示弹窗里的确认后,提示弹窗消失: //warnTips为传入的值,例如successMask("确定要删除选中的数据吗?") function successMask(warnTips)

根据juery CSS点击一个标签弹出一个遮罩层的简单示例

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="JS/JavaScript/jq

bootstrap弹框去除遮罩层效果

是通过css解决这个问题,核心css代码如下: .modal-backdrop { filter: alpha(opacity=0)!important; opacity: 0!important; } alpha和opacity通常是决定透明度. alpha和opacity区别是什么? 相同点:都是值为0表示完全透明,值为1表示完全不透明. 不同点:alpha可以应用元素特定的属性,只能作用于当前元素,其子元素不能继承,而opacity不仅仅作用于当前元素,也会影响子元素及其子子元素,具有继承