首页 > 前端
一次性解决layui弹窗之痛
来源:TP课堂 时间:2022-03-11

引入layui.css、layui.js,然后傻傻的复制就行了……


1、提示信息


1606211115162984.png


layui.use('layer', function(){
     var layer = layui.layer;
                    
     layer.open({
         content: '请填写正确的邮箱'
     });
});
layui.use('layer', function () {

      layer.alert(result.msg, function (index) {

            location.href = "/shop/";

      });

 });



2、confirm弹窗


1606211115162984.png

layui.use('layer', function(){
     layer.confirm('确定删除吗', {
     btn: ['确定', '取消'] //可以无限个按钮
          ,btn3: function(index){
            return false;
          }
    }, function(index){
        window.location.href="/mobile/user/address_delete?id="+id;  
    });
});



3、点击确定后跳转页面


 layui.use('layer', function(){
            var layer = layui.layer;
            
            layer.open({
                type: 1
                ,offset: 'auto' 
                ,id: 'layerDemo'+1 //防止重复弹出
                ,content: '<div style="text-align:center;padding:20px 80px">请登录!</div>'
                ,btn: '确定'
                ,btnAlign: 'c' //按钮居中
                ,shade: 0 //不显示遮罩
                ,yes: function(){
                    window.location.href='/index/user/login';
                }
            });
          });