当前位置 : 主页 > 手机开发 > ios >

layer弹窗在IOS上,被软键盘挤到上边的解决方法

来源:互联网 收集:自由互联 发布时间:2021-06-11
就像这种情况,经过多番请教跟尝试,找到一个能解决这个问题的方法,但可能有点笨重。就是在当前弹框里,设置offset的值,里边的值可以随意写,然后再下边给弹框追加一个样式即

分享图片

就像这种情况,经过多番请教跟尝试,找到一个能解决这个问题的方法,但可能有点笨重。就是在当前弹框里,设置offset的值,里边的值可以随意写,然后再下边给弹框追加一个样式即可。

分享图片

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="renderer" content="webkit">
        <title>解决iOS,layer弹框被软键盘挤上去的问题</title>
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="robots" content="index,follow" /><!-- 搜索引擎抓取 -->
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="x5-fullscreen" content="true">
        <meta name="full-screen" content="yes">
        <meta name="screen-orientation" content="portrait">
        <link rel="stylesheet" type="text/css" href="css/reset.css" />
        <link rel="stylesheet" href="https://img.huiyiguanjia.com/CDNFile/bootstrap/bootstrap-3.3.7.min.css">
        <script src="https://img.huiyiguanjia.com/CDNFile/jquery/jquery-2.1.2.min.js"></script>
        <script src="https://img.huiyiguanjia.com/CDNFile/layer/layer-v3.1.1/layer/layer.js"></script>
s
    </head>
    <body>
        <div class="main">
            <div class="dataDownload">
                <style type="text/css">
                    input{
                        margin:20px 0;
                        border-style: none;
                        border: 1px solid blue;
                        width: 100%;
                    }
                    textarea{
                        width:100%
                    }
                    /* .layui-layer-dialog{
                        left: 50%!important;
                        top: 60%;
                    } */
                </style>
                <input type="text" id="test">
                <input type="text" id="test">
                <input type="text" id="test">
                <input type="text" id="test">
                <input type="text" id="test">
                <input type="text" id="test">
                <input type="text" id="test">
                <input type="text" id="test">
                <input type="text" id="test">
                <textarea rows="5" cols="100%">
                    
                </textarea>
                <input type="text" id="test">
                <input type="text" id="test">
                <input type="text" id="test">
                <input type="text" id="test">
                <input type="text" id="test">
                <input type="text" id="test">
                <input type="text" id="test">
                <input type="text" id="test">
                <textarea rows="5" cols="100%">
                    
                </textarea>
                <input type="text" id="test">
                <input type="text" id="test">
                <input type="text" id="test">
                <input type="text" id="test">
                <input type="text" id="test">
                <input type="text" id="test">
                <input type="text" id="test">
            </div>
        </div>
    </body>
</html>
<script type="text/javascript">
    $("input,textarea").focus(function() {
        
        if ($(this).val() == ‘‘) {
            layer.msg(Question 2 cannot be empty., {
                
                icon: 7,
                offset:heightBox,
                time: 1001000
            });
            $(".layui-layer-dialog").css("top","60%")
            return false;
        }
    });
</script>
网友评论