layui彈出層使用(layer.alert / layer.open / layer.prompt

layui彈出層使用(layer.alert / layer.open / layer.prompt )

效果圖:

 

 

代碼:

//取消提現
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" onclick="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();
    });
 
}
 
————————————————
版權聲明：本文為CSDN博主「haveyb」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/m_nanle_xiaobudiu/article/details/79642641