layui 框架弹出一个界面弹框

简介: layui 框架弹出一个界面弹框

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>
相关文章
|
JavaScript 前端开发
layui实现点击按钮全屏
layui实现点击按钮全屏
493 0
|
4月前
|
前端开发
前端ElementPlus框架中的几种图标按钮使用方式
本文介绍了如何在Element Plus前端框架中使用带有图标的按钮,包括设置按钮大小、图标大小、按钮类型以及如何为图标添加点击事件。
410 0
|
6月前
|
JavaScript
Vue搭配ELEMENT之后,右侧点击栏点击跳转到空白页解决方法
Vue搭配ELEMENT之后,右侧点击栏点击跳转到空白页解决方法
|
前端开发 JavaScript Java
Layui的选项卡及菜单
Layui的选项卡及菜单
171 0
|
小程序 JavaScript
小程序点击轮播图跳转到tab导航界面
小程序点击轮播图跳转到tab导航界面
108 0
|
JavaScript 前端开发
49EasyUI 窗口- 自定义带有工具条和按钮的对话框
49EasyUI 窗口- 自定义带有工具条和按钮的对话框
48 0
09EasyUI 菜单与按钮- 创建简单的菜单
09EasyUI 菜单与按钮- 创建简单的菜单
35 0
|
前端开发
layui选项卡演示
layui选项卡演示
65 0
Vant3——复选框点击其他后格外出现一个输入框
复选框点击其他后格外出现一个输入框
226 0
|
前端开发
bootstrap 组件 警告框 徽章 面包屑导航 按钮 按钮组 学习总结
bootstrap 组件 警告框 徽章 面包屑导航 按钮 按钮组 学习总结