layui弹出层使用(layer.alert / layer.open / layer.prompt )

　

layer弹出层

一 layer.alert

效果图:

代码:

//取消提现
function back(id) {
    layer.alert('真的要取消吗', {
        skin: 'layui-layer-molv' //样式类名  自定义样式
       ,closeBtn: 1    // 是否显示关闭按钮
       ,anim: 1 //动画类型
       ,btn: ['确定','取消'] //按钮
       ,icon: 6    // icon
       ,yes:function(){
            return $.ajax({
                // url:'http://up.kuman.cn/settle/cancel',
                url:'<?= $this->url('settle:cancel')?>',
                type:'get',
                dataType:'json',
                data:{id:id},
                success:function(data){
                    if(data==1){
                        layer.alert('取消成功',function () {
                            window.location.reload();
                        });
                    }else if(data==0){
                        layer.alert("取消失败,请重试或联系管理员");
                    }
                }
            });
        }
       ,btn2:function(){
            layer.msg('好的,暂时不给您取消提现');
       }
    });
}

二 layer.open

效果图:

点击申请提现按钮,弹出输入框

代码:

<script type="text/javascript">

    $('#pro').on('click',function(){

            layui.use('layer', function() {
                var layer = layui.layer;
                // layer.msg('dajiahoa!');
                layer.open({
                    type: 2,
                    title: '申请提现',
                    // content:['http://up.kuman.cn/settle/eject','no'] ,//不允许出现滚动条
                    content:['<?= $this->url('settle:eject')?>','no'] ,//不允许出现滚动条
                    area:['600px', '400px']
                });
            });
            
    })
</script>

注: 

content中的第一个参数就是需要弹出的页面地址,直接写url地址(相当于接口地址),

这里, 用的是crossphp框架, 意思是跳转到settle控制器中的eject方法,在eject方法中我显示的模板

如果是原生php,可以直接指定要弹出框页面的绝对路径, 如: /a.html

三 layer.prompt

效果图:

代码:

<a href="JavaScript:void(0);" data-id="<?=$l['id'] ?>" id="ji" οnclick="kk(<?=$l['id']?>);">退回</a>

//退回a标签
function kk(id){
    layer.prompt({title:'请输入不予结算的原因'},function(val,index){
        var url='http://upa.kuman.cn/finance/tus';
        $.post(url,{id:id,val:val},function(data){

            if(data == 1){
                alert('退回成功');
            }else if(data==0){
                alert('退回失败,请重试,或联系管理员');
            }

        });
        layer.close(index);
        window.parent.location.reload();
    });

}

还有一些样式,这里因为没有用到,所以没有写出来,在此推荐另一篇文章

http://blog.csdn.net/BeauXie/article/details/60959971

相关阅读

Linux命令中Ctrl+z、Ctrl+c和Ctrl+d的区别和使用

Ctrl+c,Ctrl+d,Ctrl+z在Linux中意义 Ctrl+c和ctrl+z都是中断命令,但是他们的作用却不一样. Ctrl+c是强制中断程序的执行。 Ctrl+z

Excel表格宏是什么怎么使用

经常使用Excel表格的用户肯定会发现其中有一个宏的功能，使用宏功能，可以让我们在处理电子表格的时候，仅通过一步的操作，就能实现需要

Android Freeline加速编译App方案 使用和总结

Freeline简介 在Android Studio还没推出Instant Run功能之前，每次修改Android 工程项目时都要将整个项目重新编译一次，然后再将资

Axure中继器的基本使用：实现一个简易的人员添加、删除

现在在公司里大多数时间使用的原型工具是墨客，真的是简单易用，拖拽式的设计简直是良心。但是也有不足的地方，个人对交互要求较高，这一

百度接口API的使用

因公司项目需要，需要用到一些距离成本计算的功能和地图视图工具数据库可视化，当时也调查了很多地图开发者中心和一些国外的地图API,