layui 框架弹出一个界面弹框

王小婷

发布于 2025-05-18 15:17:12

1530

文章被收录于专栏：编程微刊编程微刊

学习文档：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>

实现效果：