专栏首页编程微刊layui 框架弹出一个界面弹框

layui 框架弹出一个界面弹框

学习文档:https://www.layui.com/

1:先引入需要的相关的文件

<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<!-- 弹框 -->
<script src="layer/layer.js"></script>
<script src="layer/extend/layer.ext.js"></script>

2:准备一个新的页面

3:小 demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            #addAsset{
                width: 100px;
                height: 30px;
                line-height: 30px;
                background: #009F95;
                color: #FFFFFF;
                text-align: center;
                
                
            }
        </style>
    </head>
    
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    
    <body>
        <div id="addAsset"><span>添加资产</span></div>
        
    </body>
    <!-- 弹框 -->
    <script src="layer/layer.js"></script>
    <script src="layer/extend/layer.ext.js"></script>
    
    <script>
        //添加资产
$("#addAsset").on("click", function() {
    layer.open({
        type : 2,
        title : '添加资产',
        area : [ '500px', '500px' ],
        fix : false, // �
        content : '1.html',
        end : function() {
            dataTable.reloadTable();
        }
    });
});
    </script>
</html>

实现效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • layer弹框在实际项目中的一些应用

    王小婷
  • ECharts加载json数据解决方案

    json数据 https://echarts.baidu.com/examples/data/asset/data/aqi-beijing.json

    王小婷
  • jQuery的toFixed() 方法-保留小数位数

    当后端给的返回值是小数的时候,前端需要对小数进行处理,得到自己想要的来展示,多数的时候,是保存小数点后面一位或者两位,这个时候,可以使用toFixed() 方法...

    王小婷
  • vuejs之v-show

    说明:v-show用于根据布尔值来进行相关标签的显示和不显示 。这里的布尔值可以是利用表达式进行判断的。

    绝命生
  • Vue 入门,Vue属性和指令

    vue是一套构建用户界面的渐进式框架,是mvvm框架的一种。vue采用了自底向上增量开发的设计,其核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目...

    前端博客 : alili.tech
  • vue.js学习(1) vue.js 第一个实例

    https://segmentfault.com/a/1190000011331190

    前端博客 : alili.tech
  • 【前端】利用qrcode.js生成二维码

    https://gitee.com/20eit/eit/tree/master/qrcode/

    ZhangXianSheng
  • Ambari 集群部署

    你的人生永远不会辜负你的。那些转错的弯,那些走错的路,那些流下的泪水,那些滴下的汗水,那些留下的伤痕,全都让你成为独一无二的自己。

    DataScience
  • 《Streaming Systems》第五章-精确一次处理

    今天的文章简单提下所谓的流计算中精确一次处理的实现。所谓精确一次处理是相对于至少一次和至多一次处理而言的,由系统保证在整个处理过程中所有数据有且仅被处理一次。

    哒呵呵
  • pagehelper和通用mapper与springboot整合

    关于pageHelper的使用,其官方文档中介绍的比较清楚,地址为:https://pagehelper.github.io/docs/howtouse/

    开发架构二三事

扫码关注云+社区

领取腾讯云代金券