layui popup layer usage (layer.alert / layer.open / layer.prompt)

一 layer.alert

Rendering:

Code:

//Cancel withdrawal
 function back ( id ) {
     layer . alert ( 'Do you really want to cancel' , {
        skin : 'layui-layer-molv' //Style class name custom style
 , closeBtn : 1     // Whether to display the close button
 , anim : 1 //Animation type
 , btn : [ 'OK' , 'Cancel' ] //Button
 , 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 ( "Cancel failed, please try again or contact admin" ) ;
                     }
                }
            }) ;
         }
        , btn2 :function (){
             layer . msg ( 'Ok, I won't cancel the withdrawal for you for now' ) ;
        }
    });
}

Two layer.open

Rendering:

Click the apply for withdrawal button, and the input box will pop up

Code:

<script type="text/javascript">
$('#pro').on('click',function(){
    

            layui.use('layer', function() {
                var layer = layui.layer;
// layer.msg('dajiahoa!');
layer.open({                                
                    type : 2 ,
                     title : 'Apply for withdrawal' ,
 // content:['http://up.kuman.cn/settle/eject','no'] ,//Scroll bar is not allowed
 content : [ ' <? = $this -> url ( 'settle:eject' ) ?> ' , 'no' ] , // scrollbars are not allowed
 area : [ '600px' , '400px' ]                                                            
                });
            });
})
</script>            
    

Note: 

The first parameter in content is the page address that needs to be popped up, directly write the url address (equivalent to the interface address),

这里, 用的是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();
    });

}

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

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