如何使用layer弹窗

最新推荐文章于 2025-05-11 11:26:37 发布

siyi_blog

最新推荐文章于 2025-05-11 11:26:37 发布

阅读量1.8w

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/siyi_blog/article/details/80978506

本文介绍如何将Layer弹窗插件作为独立插件使用。主要包括下载组件包、引入layer.js及创建js文件使用弹窗等内容。并提供了一个使用DOM作为content的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layer可以独立使用，也可以通过Layui模块化使用。详见官网：

layer官网地址：http://www.layui.com/doc/modules/layer.html

在平时的项目中，很多时候页面中难免会用到弹窗的情况，这里介绍将layer作为独立插件使用的方法。

步骤一：去 layer 独立版本官网下载组件包。

步骤二：获得 layer 文件包后，解压并将 layer 整个文件夹（不要拆分结构）存放到你项目的任意目录，使用时，只需根据路径引入 layer.js 即可。使用layer首先需在页面中引入jQuery1.8以上的任意版本，然后再引入layer.js才生效。

步骤三：上述步骤完成后，创建自己的js文件，在文件中即可使用layer弹窗了。示例：

layer.open({
  content: 'test'   //content可以是字符串，可以是DOM，也可以是一个URL
  ,btn: ['按钮一', '按钮二', '按钮三']
  ,yes: function(index, layero){
    //按钮【按钮一】的回调
  }
  ,btn2: function(index, layero){
    //按钮【按钮二】的回调
    
    //return false 开启该代码可禁止点击该按钮关闭
  }
  ,btn3: function(index, layero){
    //按钮【按钮三】的回调
    
    //return false 开启该代码可禁止点击该按钮关闭
  }
  ,cancel: function(){ 
    //右上角关闭回调
    
    //return false 开启该代码可禁止点击该按钮关闭
  }
});

扩展：当layer 的 content为DOM时，引用方法推荐使用这种方法：

html代码如下：

  <script class="addBankInfo" type="text/html">
          <form action="">
             <div class="addBankInfo" >
                    <table>
                        <tr>
                            <td>真实姓名：</td>
                            <td>甜甜</td>
                        </tr>
                        <tr>
                            <td>身份证号：</td>
                            <td>5002405676867</td>
                        </tr>
                        <tr>
                            <td>手机号：</td>
                            <td><input type="text" name="phoneNo"></td>
                            <td>请填写该卡在银行预留的手机号码</td>
                        </tr>
                        <tr>
                            <td>验证码：</td>
                            <td><input type="text" name="phoneCode"></td>
                            <td><button type="button">获取验证码</button></td>
                        </tr>
                    </table>
                </div>
          </form>
            </script>

js代码如下：

$('body').on('click','.addBank',function () {
        layer.open({
            content: $('.addBankInfo').html()
            ,area: ['800px', '500px'] //自定义文本域宽高
            ,btn: ['确定', '取消']
            ,yes: function(){
                //按钮【确定】的回调
            }
            ,btn2: function(){
                //按钮【取消】的回调
                return 0;
            }
        });
    })