Echarts实战案例代码(32)：layui模态框弹出框展现echarts不显示的问题_解决方案

封装layui弹出层函数

function getDiv(title, url, w, h) {
    if (title == null || title == '') {
        title = false;
    }

    if (url == null || url == '') {
        url = "404.html";
    }

    if (w == null || w == '') {
        w = ($(window).width() * 0.9);
    }

    if (h == null || h == '') {
        h = ($(window).height() - 50);
    }

    layer.open({
        type: 1,
        area: [w + 'px', h + 'px'],
        title: false,  //title: title,
        fix: false, //不固定
        maxmin: false,
        shadeClose: true,
        closeBtn: 2,//关闭按钮，0不显示，1和2两种风格;
        anim: 3,//弹出动画,0~6;
        shade: 0.6,//遮罩层
        skin: 'layui-layer-nobg layer_bg', //没有背景色，系统自带
        content: $('#popup'),
    });
}

HTML调用

<div class="ctitle">性别占比分析 <span class="laybg new1" onClick="getDiv('性别占比分析','gender.html',750,550)"><iclass="icon2">&#xe6b4;</i></span>

弹出层内容

<!--弹出层-->
<div id="popup" style="background:rgba(3,2,36,0.8);display: none;">
    <div id="gender2" style="width:700px; height: 550px;"></div>
</div>

不显示的根本原因

<div id="gender2" style="width:700px; height: 550px;"></div>

相关链接

  1. Echarts实战案例代码(31)：模态框弹出层无法正常显示echarts图表的解决方案
  2. tab选项卡切换时echarts无法正常加载显示问题的解决方案
  3. Echarts实战案例代码(32)：layer弹出框展现echarts不显示的问题

Done！