layui彈出層layer的area過大被遮擋

時間 2019-11-06

標籤 layui 彈出 layer area 過大遮擋简体版

原文原文鏈接

layer彈出窗口在彈出時指定了area，彈出後，若是當前頁面（iframe）大小比彈出的窗口小，那麼就會出現沒法操做彈出窗口的尷尬狀況。如圖:javascript

彈出窗口比當前頁面大,這時，惟有放大整個頁面才能看到徹底的彈出窗口，才能夠操做。css

layui 爲咱們提供了 layer.style(); 方法來從新跳整窗口的大小 , 而後咱們只須要寫一個函數,獲得當前document的寬度和高度, 判斷彈出框是否大於document來調整窗口大小html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
<body>
<button id="dianji">點擊</button>

<form class="layui-form" action="" id="id">
    <div class="layui-form-item">
        <label class="layui-form-label">單行輸入框</label>
        <div class="layui-input-block">
            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="請輸入標題"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">驗證必填項</label>
        <div class="layui-input-block">
            <input type="text" name="username" lay-verify="required" lay-reqtext="用戶名是必填項，豈能爲空？" placeholder="請輸入"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">驗證手機</label>
            <div class="layui-input-inline">
                <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">驗證郵箱</label>
            <div class="layui-input-inline">
                <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
</form>

<script src="layui/layui.all.js"></script>
<script type="text/javascript">
    var layerIndex;
    var layerInitWidth;
    var layerInitHeight;
    var $;
    layui.use(['form', 'jquery'], function () {
        var form = layui.form;
        $ = layui.jquery;
        $("#dianji").click(function () {
            layer.open({
                type: 1,
                area: ['500px', '900px'],
                content: $('#id'), //這裏content是一個DOM，注意：最好該元素要存放在body最外層，不然可能被其它的相對元素所影響
                btn: ['按鈕一', '按鈕二', '按鈕三']
                , yes: function (index, layero) {
                    //按鈕【按鈕一】的回調
                }
                , btn2: function (index, layero) {
                    //按鈕【按鈕二】的回調

                    //return false 開啓該代碼可禁止點擊該按鈕關閉
                }
                , btn3: function (index, layero) {
                    //按鈕【按鈕三】的回調

                    //return false 開啓該代碼可禁止點擊該按鈕關閉
                }
                , cancel: function () {
                    //右上角關閉回調

                    //return false 開啓該代碼可禁止點擊該按鈕關閉
                },
                success: function (layero, index) {
                    //獲取當前彈出窗口的索引及初始大小
                    layerIndex = index;
                    layerInitWidth = $("#layui-layer" + layerIndex).width();
                    layerInitHeight = $("#layui-layer" + layerIndex).height();
                    resizeLayer(layerIndex, layerInitWidth, layerInitHeight);
                    form.render();
                }
            });

        })

    });

    function resizeLayer(layerIndex, layerInitWidth, layerInitHeight) {
        var windowWidth = $(document).width();
        var windowHeight = $(document).height();
        var minWidth = layerInitWidth > windowWidth ? windowWidth : layerInitWidth;
        var minHeight = layerInitHeight > windowHeight ? windowHeight : layerInitHeight;
        console.log("win:", windowWidth, windowHeight);
        console.log("lay:", layerInitWidth, layerInitHeight);
        console.log("min:", minWidth, minHeight);
        layer.style(layerIndex, {
            top: 0,
            width: minWidth,
            height: minHeight
        });
    }
</script>
</body>
</html>

效果圖:java

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。