急急急,在线等,弹窗中下拉框内容被遮挡了

提问 未结
17 686
Jasmine_w
Jasmine_w 2018-5-19
悬赏:20飞吻
我在社区搜索了很久,终于找到一个办法解决:就是
.layui-layer-page .layui-layer-content { overflow: visible!important; }
但是出现新的问题了,弹窗的内容很多的时候怎么办,滚动条没了,截图:


完成超出的内容并不会出现滚动条,怎么办阿,在线等,急
回帖
  • Jasmine_w
    2018-5-19


    本来不加样式:.layui-layer-page .layui-layer-content { overflow: visible!important; }
    显示的效果是这样子
    0 回复
  • 醉蜜
    2018-5-19
    表格中不建议使用layui样式来渲染,使用原生效果就可以了.
    0 回复
  • Jasmine_w
    2018-5-19
    @醉蜜 其一原生效果不好看,其二我这个是弹窗不是表格
    0 回复
  • 醉蜜
    2018-5-19
    @茉莉 呵呵,好吧,你在弹窗中加一个带滚动条的容器就可以了
    0 回复
  • Jasmine_w
    2018-5-19
    @醉蜜 主要是跟我加解决那个样式有冲突,没办法阿,那个就是滚动条的样式,
    0 回复
  • Biubiu534
    2018-5-19
    $('.layui-layer-content').css('overflow','inherit')
    0 回复
  • Jasmine_w
    2018-5-19
    @Biubiu534 跟这个效果是一样的.layui-layer-content { overflow: visible!important; }
    0 回复
  • Biubiu534
    2018-5-19
    @茉莉 额 是有这个问题
    0 回复
  • siaoynli
    2018-8-2
    内容很多的话,弹窗还是要滚动条的。要不就是全屏, 至于下拉被遮住,看我的解决方案

    http://fly.layui.com/jie/31097/
    0 回复
  • Jasmine_w
    2018-8-2
    @siaoynli 说真的,主要没看懂你写的怎么用
    0 回复
  • siaoynli
    2018-8-2
    @茉莉 我是把这个作为一个模块的,所以自己写了带参数的
     var index = layer.open({
    type: 2
    , title: "标题"
    , content: ['/add','no']
    , maxmin: false
    , resize: false
    , area: ['500px', '400px']
    , btn: ['确定', '取消']
    , yes: function (index, layero) {
    var submit = layero.find('iframe').contents().find("#app-form-submit");
    submit.click();
    }, success(layero, index) {
    var obj = $(layero).find('.layui-layer-content');
    obj.css('position', 'relative');
    obj.css('z-index', 198912345);
    obj.css('height', $(window).height() + 'px');
    obj.css('overflow', 'hidden');
    layer.iframeAuto(index);
    var btn = obj.parents('.layui-layer').find('.layui-layer-btn');
    btn.css('bottom', 0);
    btn.css('right', 0);
    btn.css('position', 'absolute');
    btn.css('z-index', '198912346');
    btn.css('width', '100%');
    layero.find('iframe').css('height', $(window).height() + 'px');
    }
    });
    不带参数的
    0 回复
  • Jasmine_w
    2018-8-2
    @siaoynli 你的效果能发下链接看下效果吗,你里面传的那些类的啥的定义设置没看懂,而且我用的是type:1,不是frame做的
    0 回复
  • Jasmine_w
    2018-8-2
    @siaoynli
    <button class="layui-btn" id="clickBtn">弹窗</button>
    <!--clickBtnView-->
    <div class="layui-pop" id="clickBtnView" style="display: none;">
    <!-- style="overflow: visible;z-index:99999;"-->
    <form class="layui-form site-block">
    <div class="layui-form-item">
    <label class="layui-form-label">地址:</label>
    <div class="layui-input-block">
    <div class="default-text">23222</div>
    </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">地址:</label>
    <div class="layui-input-block">
    <div class="default-text">23222</div>
    </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">地址:</label>
    <div class="layui-input-block">
    <div class="default-text">23222</div>
    </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">地址:</label>
    <div class="layui-input-block">
    <div class="default-text">23222</div>
    </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">地址:</label>
    <div class="layui-input-block">
    <select name="city" lay-verify="required">
    <option value=""></option>
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">广州</option>
    <option value="3">深圳</option>
    <option value="4">杭州</option>
    <option value="4">杭州</option>
    <option value="4">杭州</option>
    <option value="4">杭州</option>
    <option value="4">杭州</option>
    <option value="4">杭州</option>
    <option value="4">杭州</option>
    <option value="4">杭州</option>
    <option value="4">杭州</option>
    <option value="4">杭州</option>
    <option value="4">杭州</option>
    <option value="4">杭州</option>
    <option value="4">杭州</option>
    <option value="4">杭州</option>
    <option value="4">杭州</option>
    </select>
    </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">地址:</label>
    <div class="layui-input-block">
    <select name="city" lay-verify="required">
    <option value=""></option>
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">广州</option>
    <option value="3">深圳</option>
    <option value="4">杭州</option>
    </select>
    </div>
    </div>
    </form>
    </div>
    <script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form', 'element'], function () {
    var layer = layui.layer
    , form = layui.form
    , $ = layui.jquery;

    $('#clickBtn').on('click', function () {

    layer.open({
    type: 1,
    title: '点击弹窗',
    area: '640px',
    shadeClose: true, //点击遮罩关闭
    content: $('#clickBtnView'),
    btnAlign: 'c'
    , btn: ['确定', '取消']
    , yes: function (index, layero) {
    //按钮【按钮一】的回调

    layer.close(index);
    }
    , btn2: function (index, layero) {
    //按钮【按钮二】的回调
    if (confirm('确定要关闭么')) { //只有当点击confirm框的确定时,该层才会关闭
    layer.close(index)
    }
    // return false //开启该代码可禁止点击该按钮关闭
    }
    , cancel: function (index, layero) {
    //右上角关闭回调

    //return false 开启该代码可禁止点击该按钮关闭
    }
    });


    });



    });
    </script>
    我这个是一个按钮点击弹窗,弹窗里面有下拉菜单的,怎么用你那个方法实现??
    0 回复
  • siaoynli
    2018-8-2
    @茉莉 我看了一下,弹出窗口,内容如果多的话,建议最大化窗口。弹出窗口出现滚动条的话,下拉菜单是没法实现在窗口外面的。
    0 回复
  • Jasmine_w
    2018-8-2
    @siaoynli 对呀,我现在还没找到办法,以为你那个可以
    0 回复
  • siaoynli
    2018-8-2
    @茉莉 这个没办法实现的啦,下拉要超出弹窗之外,肯定要浮动在窗口之上
    浮动的整体就是 .layui-layer-content 这个div,但是 layui-layer-content 又不能遮住 下拉框,所以要改变 layui-layer-content的overflow,这样就和滚动冲突了,弹窗滚动条就是 layui-layer-content出现的滚动条
    0 回复
  • Jasmine_w
    2018-8-2
    @siaoynli 是的呢
    0 回复