layui在当前页面弹出层的HTML

简介: layui在当前页面弹出层的HTML

封装弹出层调用函数

/*弹出层*/
function getDiv(title, id, w, h) {
    if (title == null || title == '') {
        title = false;
    }
    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: $(id),
    });
}


HTML页面调用

     <div class="ctitle">年龄占比分析
                            <span class="laybg new2" onClick="getDiv('年龄占比分析','#popup2',750,550)"><i class="icon2">
                                &#xe6b4;</i></span>
                            <div id="ages"></div>
                        </div>

HTML页面要显示的层

<!--弹窗内容 Begin-->
<!--年龄-->
<div class="popup" id="popup2">
    <div id="ages2" style="width:750px;height:550px;"></div>
</div>
<!--弹窗信息 End-->

Done !

相关文章
|
2月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
72 7
|
2月前
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
73 11
|
2月前
太便利了 !通义灵码方便生成html页面
太便利了 !通义灵码方便生成html页面
68 0
|
2月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
60 2
|
2月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
43 0
|
3月前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
46 1
|
4月前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
55 6
|
3月前
|
移动开发 HTML5
一个最简单的 HTML 页面结构如下:
HTML 是一种标记语言,用于描述网页结构。通过 `&lt;html&gt;`, `&lt;head&gt;`, `&lt;body&gt;` 等标签构建页面,支持文本、图像、链接、表格等多种元素。本文介绍了 HTML 基础,包括常用标签及创建简单网页的实例,帮助初学者快速入门。
91 0
|
3月前
|
XML Web App开发 数据格式
HTML 页面显示 XML 数据
10月更文挑战第2天
|
3月前
|
数据可视化 小程序 JavaScript
DIYGW可视化快速生成VUE3静态html页面
DIYGW可视化快速生成VUE3静态html页面
61 0