弹出层 - AuxUI - 模块化前端UI框架

需要加载popup模块，可通过下列方式加载

    
    //加载popup模块
    auxui(['popup'], function (popup){
        
    });

加载层

 
<button type="button" class="btn btn-primary loading1">默认</button>
<button type="button" class="btn btn-success loading2">风格1</button>
<button type="button" class="btn btn-info loading3">风格2</button>
<button type="button" class="btn btn-info loading4">风格3</button>
<button type="button" class="btn btn-info loading5">容器内显示</button>
<div class="col-loading"></div>
<script type="text/javascript">
auxui(['popup'], function (popup){
    $('.loading1').click(function(event) {
        popup.loading({
            time : 2000,
            mask : true
        });
    });

    $('.loading2').click(function(event) {
        popup.loading({
            time : 2000,
            icon : 1,
            mask : false
        });
    });

    $('.loading3').click(function(event) {
        popup.loading({
            time : 2000,
            icon : 1,
            mask : false,
            content : '正在加载...'
        });
    });

    $('.loading4').click(function(event) {
        popup.loading({
            time : 2000,
            icon : 1,
            mask : true,
            content : '正在加载...',
            style : {
                color : '#000',
                border : '1px #ddd solid',
                background : '#fff'
            }
        });
    });

    

}); 
</script>

选项

名称	类型	描述
time	number	有效时间，默认为0，不会自动销毁，则到一定的时间会自动销毁
icon	number	预选图标，可选值1-2，默认为1
mask	boolean	显示遮罩，默认false
content	string	显示文本，默认空
ele	string	绑定容器，在容器内显示，默认空
style	object	CSS样式

手动关闭加载层

<script type="text/javascript">
auxui(['popup'], function (popup){
    var id = '';
    $('.loading4').click(function(event) {
        id = popup.loading({
            icon : 1,
            mask : true,
            content : '正在加载...',
            style : {
                color : '#000',
                border : '1px #ddd solid',
                background : '#fff'
            }
        });
    });

    //手动关闭加载层
    $('.loading5').click(function(event) {
        popup.close(id);
    });
    
</script>

通知

多点击几次看效果

 
<button type="button" class="btn btn-primary ui-notify-1">Top Center</button>
<button type="button" class="btn btn-success ui-notify-2"> Top Left</button>
<button type="button" class="btn btn-info ui-notify-3">Top Right</button>
<button type="button" class="btn btn-info ui-notify-4">Bottom Center</button>
<button type="button" class="btn btn-info ui-notify-5">Bottom Left</button>
<button type="button" class="btn btn-info ui-notify-6">Bottom Right</button>

<script type="text/javascript">
auxui(['popup'], function (popup){

    $('.ui-notify-1').click(function(event) {

        popup.notify({
            title : '标题',
            content : '内容',
            pos : 'top-left',
            width : 'auto',
            time : 2000,
            yes : function(e){
                console.log(e);
            }
        });

    });

});
</script>

选项

名称	类型	描述
title	string	标题
content	string	信息内容
pos	string	调整通知出现的位置，可选`top-left`、`top-right`、`bottom-center`、`bottom-left`、`bottom-right`、`top-center`
time	number	有效时间，默认为0，不会自动销毁，则到一定的时间会自动销毁
skin	string	皮肤可选：`default`、`success`、`info`、`warning`、`danger`
width	string/number	默认宽度260，自动宽度设为`'auto'`
yes	function	当被关闭后触发

信息框

 
<button type="button" class="btn btn-default btn-demo1">示例1</button>
<button type="button" class="btn btn-default btn-demo2">示例2</button>
<button type="button" class="btn btn-default btn-demo3">示例3</button>
<button type="button" class="btn btn-default btn-demo4">示例4</button>
<button type="button" class="btn btn-default btn-demo5">示例5</button>

<script type="text/javascript">
auxui(['popup'], function (popup){
    $('.btn-demo1').click(function(event) {
        popup.alert('很高兴见到你');
    });

    $('.btn-demo2').click(function(event) {
        popup.alert({
            title : '信息框',
            content : '再次，很高兴见到你!',
            icon : 5
        });
    });

    $('.btn-demo3').click(function(event) {
        var alertid = popup.alert({
            title : '信息框',
            content : '发生未知的错误，确认要退出吗!',
            icon : 2,
            mask : true,
            btn : {
                btnText : ['确认', '取消'],
                align : 'right',
                yes : function(data){
                    alert(data.btnText + '按钮被点击 - 索引：' + data.btnIndex);
                    popup.close(alertid);
                    console.log(data);
                }
            }
        });
    });


    $('.btn-demo4').click(function(event) {
        popup.msg('这个是最常见的消息框');
    });

    $('.btn-demo5').click(function(event) {
        var msgid = popup.msg({
            time : 0,
            content : '确认你很牛吗？',
            btn : {
                btnText : ['母牛啊', '牛毛线'],
                align : 'left',
                yes : function(data){
                    alert(data.btnText + '按钮被点击 - 索引：' + data.btnIndex);
                    popup.close(msgid);
                    console.log(data);
                }
            }
        });
    });
}); 
</script>

选项

名称	类型	描述
time	number	有效时间，默认为0，不会自动销毁，则到一定的时间会自动销毁，仅限消息框( `MSG` )有效
icon	number	预选图标，默认`undefined`，可选值：`2` 错误图标、`3` 询问图标、`4` 警告图标、`5` 信息图标，仅限信息框( `ALERT` )有效
width	number	宽度
maxWidth	number	最大宽度，默认为260
mask	boolean	显示遮罩，默认为`FALSE`，仅限信息框( `ALERT` )有效
content	string	消息文本，默认NULL
title	string	标题，仅限信息框( `ALERT` )有效
effect	boolean	启用动画效果，默认为`true`，仅限消息框( `MSG` )有效
draggable	boolean	是否应许拖动，默认为`FALSE`，仅限消息框( `ALERT` )有效
show	string	当被创建时显示动画效果，默认`undefined`，可选：`blind`、`bounce`、`clip`、`drop`、`explode`、`fade`、`fold`、`puff`、`scale`、`shake`、`slide`，仅限消息框( `ALERT` )有效
hide	string	当隐藏时动画效果，默认`undefined`，可选： `blind`、`clip`、`drop`、`explode`、`fade`、`fold`、`puff`，仅限消息框( `ALERT` )有效
btn	object	按钮组，默认`undefined`，参考如下配置 `btnText` 按钮组文本 `align` 对齐方式：`left` ，`center`，`right` `yes` 回调函数 `示例：` btn : { btnText : ['确认', '取消'], align : 'left', yes : function(data){ alert(data.btnText + '按钮被点击 - 索引：' + data.btnIndex); console.log(data); } }

页面层

<button type="button" class="btn btn-default btn-demo6" style="margin-bottom: 10px;">初次体验</button>
<button type="button" class="btn btn-default btn-demo7" style="margin-bottom: 10px;">上弹出</button>
<button type="button" class="btn btn-default btn-demo8" style="margin-bottom: 10px;">右弹出</button>
<button type="button" class="btn btn-default btn-demo9" style="margin-bottom: 10px;">下弹出</button>
<button type="button" class="btn btn-default btn-demo10" style="margin-bottom: 10px;">左弹出</button>
<button type="button" class="btn btn-default btn-demo11" style="margin-bottom: 10px;">左上弹出</button>
<button type="button" class="btn btn-default btn-demo12" style="margin-bottom: 10px;">左下弹出</button>
<button type="button" class="btn btn-default btn-demo13" style="margin-bottom: 10px;">右上弹出</button>
<button type="button" class="btn btn-default btn-demo14" style="margin-bottom: 10px;">右下弹出</button>
<button type="button" class="btn btn-default btn-demo15" style="margin-bottom: 10px;">居中弹出</button>
<button type="button" class="btn btn-default btn-demo16" style="margin-bottom: 10px;">公告示例</button>
<button type="button" class="btn btn-default btn-demo17" style="margin-bottom: 10px;">prompt示例</button>
<button type="button" class="btn btn-default btn-demo18" style="margin-bottom: 10px;">iframe层</button>
<button type="button" class="btn btn-default btn-demo19" style="margin-bottom: 10px;">TAB层</button>
<script type="text/javascript">
auxui(['popup'], function (popup){
    $('.btn-demo6').click(function(event) {
        var popupid = popup.open({
            type : '',
            width : 500,
            height : 320,
            mask : false,
            controlBtn : { //控制按钮可用，最小化、最大化，关闭
                btnMin : true,
                btnMax : true,
                btnClose : true,
                yes: function(data){
                    console.log('控制按钮被点击：' + data);
                }
            },
            position : 'center', //显示位置，可以数组[100,200], 默认居中 top上 right右 bottom下 left左 leftTop 左上 leftBottom 左下 rightTop 右上 rightBottom 右下 center 中
            title : '当你选择该窗体时，即会在最顶端',
            content : '<p style="color:#f00;">任意HTML代码</p>',
            btn : {
                btnText : ['确认', '取消'],
                align : 'left',
                yes : function(data){
                    alert(data.btnText + '按钮被点击 - 索引：' + data.btnIndex);
                    popup.close(popupid);
                    console.log(popupid);
                }
            },
            show : 'clip', //显示动画：blind、Bounce、Clip、Drop、Explode、Fade、Fold、Puff、Scale、Shake、Slide
            hide : 'Puff', //隐藏动画: blind、Clip、Drop、Explode、Fade、Fold、Puff
            create:function(data){
                console.log('创建完毕：' + data);
            },
            draggable : true,
            draggableStart : function(data){
                console.log('拖动开始：' + data);
            },
            draggableDrag : function(data){
                console.log('拖动过程：' + data);
            },
            draggableStop : function(data){
                console.log('拖动结束：' + data);
            },
            resizable : true,
            resizableResize: function(data){
                console.log('改变大小过程：' + data);
            },
            resizableStart: function(data){
                console.log('改变大小开始：' + data);
            },
            resizableStop: function(data){
                console.log('改变大小结束：' + data);
            }
        });
    });

    $('.btn-demo7').click(function(event) {
        var popupid = popup.open({
            width : 200,
            height : 150,
            mask : false,
            controlBtn : {
                btnMin : true,
                btnMax : true,
                btnClose : true,
                yes: function(data){
                    console.log('控制按钮被点击：' + data);
                }
            },
            position : 'top',
            title : '弹出框',
            content : '上中'
        });
    });

    $('.btn-demo8').click(function(event) {
        var popupid = popup.open({
            width : 200,
            height : 150,
            mask : false,
            controlBtn : {
                btnMin : true,
                btnMax : true,
                btnClose : true,
                yes: function(data){
                    console.log('控制按钮被点击：' + data);
                }
            },
            position : 'right',
            title : '弹出框',
            content : '右中'
        });
    });

    $('.btn-demo9').click(function(event) {
        var popupid = popup.open({
            width : 200,
            height : 150,
            mask : false,
            controlBtn : {
                btnMin : true,
                btnMax : true,
                btnClose : true,
                yes: function(data){
                    console.log('控制按钮被点击：' + data);
                }
            },
            position : 'bottom', 
            title : '弹出框',
            content : '下中'
        });
    });

    $('.btn-demo10').click(function(event) {
        var popupid = popup.open({
            width : 200,
            height : 150,
            mask : false,
            controlBtn : {
                btnMin : true,
                btnMax : true,
                btnClose : true,
                yes: function(data){
                    console.log('控制按钮被点击：' + data);
                }
            },
            position : 'left', 
            title : '弹出框',
            content : '左中'
        });
    });

    $('.btn-demo11').click(function(event) {
        var popupid = popup.open({
            width : 200,
            height : 150,
            mask : false,
            controlBtn : {
                btnMin : true,
                btnMax : true,
                btnClose : true,
                yes: function(data){
                    console.log('控制按钮被点击：' + data);
                }
            },
            position : 'leftTop', 
            title : '弹出框',
            content : '左上'
        });
    });

    $('.btn-demo12').click(function(event) {
        var popupid = popup.open({
            width : 200,
            height : 150,
            mask : false,
            controlBtn : {
                btnMin : true,
                btnMax : true,
                btnClose : true,
                yes: function(data){
                    console.log('控制按钮被点击：' + data);
                }
            },
            position : 'leftBottom', 
            title : '弹出框',
            content : '左下'
        });
    });

    $('.btn-demo13').click(function(event) {
        var popupid = popup.open({
            width : 200,
            height : 150,
            mask : false,
            controlBtn : {
                btnMin : true,
                btnMax : true,
                btnClose : true,
                yes: function(data){
                    console.log('控制按钮被点击：' + data);
                }
            },
            position : 'rightTop', 
            title : '弹出框',
            content : '右上'
        });
    });

    $('.btn-demo14').click(function(event) {
        var popupid = popup.open({
            width : 200,
            height : 150,
            mask : false,
            controlBtn : {
                btnMin : true,
                btnMax : true,
                btnClose : true,
                yes: function(data){
                    console.log('控制按钮被点击：' + data);
                }
            },
            position : 'rightBottom', 
            title : '弹出框',
            content : '右下'
        });
    });

    $('.btn-demo15').click(function(event) {
        var popupid = popup.open({
            width : 200,
            height : 150,
            mask : false,
            controlBtn : {
                btnMin : true,
                btnMax : true,
                btnClose : true,
                yes: function(data){
                    console.log('控制按钮被点击：' + data);
                }
            }, 
            title : '弹出框',
            content : '居中'
        });
    });

    $('.btn-demo16').click(function(event) {
        var popupid = popup.open({
            width : 300,
            height : 380,
            mask : true,
            controlBtn : false, 
            title : false,
            content : '<div style="position: absolute;top:0;left:0;padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;height:100%;">这是一个演示公告信息内容，更多配置查阅开发文档。</div>',
            btn : {
                btnText : ['火速围观','残忍拒绝'],
                align : 'center',
                yes : function(data){
                    alert(data.btnText + '按钮被点击 - 索引：' + data.btnIndex);
                    popup.close(popupid);
                    console.log(popupid);
                }
            }
        });
    });

    $('.btn-demo17').click(function(event) {
        var popupid = popup.prompt({
            title: '输入任何口令，并确认',
            tips : '提示输入信息',
            inputType : 'password', //输入方式：text/password
            mask : true,
            btn : {
                btnText : ['确认', '取消'],
                align : 'center'
            },
            draggable : true,
            yes : function(data){
                popup.close(popupid);
                console.log(data);
            }
        });
    });


    $('.btn-demo18').click(function(event) {
        var popupid = popup.open({
            type : 'iframe',
            width : 560,
            height : 480,
            mask : false,
            controlBtn : {
                btnMin : true,
                btnMax : true,
                btnClose : true,
                yes: function(data){
                    console.log('控制按钮被点击：' + data);
                }
            }, 
            btn : {
                btnText : ['确认', '取消'],
                align : 'left',
                yes : function(data){
                    alert(data.btnText + '按钮被点击 - 索引：' + data.btnIndex);
                    popup.close(popupid);
                    console.log(popupid);
                }
            },
            draggable : true,
            resizable : true,
            title : true,
            content : 'http://auxui.aimlt.com'
        });
    });

    $('.btn-demo19').click(function(event) {
        var popupid = popup.open({
            type : 'tab',
            width : 560,
            height : 480,
            mask : false,
            controlBtn : {
                btnMin : true,
                btnMax : true,
                btnClose : true,
                yes: function(data){
                    console.log('控制按钮被点击：' + data);
                }
            }, 
            btn : {
                btnText : ['确认', '取消'],
                align : 'left',
                yes : function(data){
                    alert(data.btnText + '按钮被点击 - 索引：' + data.btnIndex);
                    popup.close(popupid);
                    console.log(popupid);
                }
            },
            draggable : true,
            resizable : true,
            title : '标题',
            content : '<div class="ui-tabs ui-tab-brief"> <ul class="nav nav-tabs"> <li class="tabs-nav-item active"> <a href="javascript:;" class="tab-toggle" data-tab="tab1">标签页1</a> </li> <li class="tabs-nav-item"> <a href="javascript:;" class="tab-toggle" data-tab="tab2">标签页2</a> </li> </ul> <div class="tab-content"> <div class="tab-pane" data-tab="tab1">简洁风格1</div> <div class="tab-pane" data-tab="tab2">简洁风格2</div> </div> </div>'
        });
    });

}); 
</script>

选项

名称	类型	描述
type	string	页面类型，默认`undefined`，可选值：`iframe`，`tab`
width	number	宽度，默认`undefined`
height	number	高度，默认`undefined`
mask	boolean	显示遮罩，默认false
controlBtn	object	控制按钮，默认`undefined`，如果是`prompt层`则设置无效，参考如下配置： `btnMin` 显示最小化按钮，默认`false` `btnMax` 显示最大化按钮，默认`false` `btnClose` 显示关闭按钮，默认`false` `yes` 回调函数 `示例：` btn : { btnMin : true, btnMax : true, btnClose : true, yes: function(data){ console.log(data); } }
position	string/object	显示位置，默认居中`center`，示例： `['100px', '50px']`同时定义top、left坐标，其他可选：`top`上， `right`右， `bottom`下， `left`左， `leftTop` 左上， `leftBottom` 左下， `rightTop` 右上， `rightBottom` 右下， `center` 中
title	string	窗口标题
tips	string	提示信息，`prompt层`设置有效
inputType	string	输入方式，`prompt层`设置有效,可选：`text`，`password`，`number`
content	string	内容并支持HTML，如果`TYPE`为`iframe`，内容为URL地址，如果为`prompt层`，内容为默认值
btn	object/function	按钮组，默认`undefined`，请参考如下配置 `btnText` 按钮组文本 `align` 对齐方式：`left` ，`center`，`right` `yes` 回调函数 `示例：` btn : { btnText : ['确认', '取消'], align : 'left', yes : function(data){ alert(data.btnText + '按钮被点击 - 索引：' + data.btnIndex); console.log(data); } } `prompt层`简化示例： btn : function(data){ alert(data.btnText + '按钮被点击 - 索引：' + data.btnIndex); console.log(data); }
show	string	当被创建时显示动画效果，默认`undefined`，可选：`blind`、`Bounce`、`Clip`、`Drop`、`Explode`、`Fade`、`Fold`、`Puff`、`Scale`、`Shake`、`Slide`
hide	string	当隐藏时动画效果，默认`undefined`，可选： `blind`、`Clip`、`Drop`、`Explode`、`Fade`、`Fold`、`Puff`
create	function	创建时触发
destroy	function	被销毁时触发
draggable	boolean	应许拖动，默认false
draggableStart	function	拖动开始触发，如果是`prompt层`则设置无效
draggableDrag	function	拖动过程触发，如果是`prompt层`则设置无效
draggableStop	function	拖动结束触发，如果是`prompt层`则设置无效
resizable	boolean	应许改变大小，默认false，如果是`prompt层`则设置无效
resizableResize	function	改变大小过程触发，如果是`prompt层`则设置无效
resizableStart	function	改变大小开始触发，如果是`prompt层`则设置无效
resizableStop	function	改变大小结束触发，如果是`prompt层`则设置无效

方法

使用reset(name, value, index)方法进行重置，参数name名称，value预设置值，index唯一标识ID，在创建层时返回的值为ID

置标题

    popup.reset('title', '新标题', index);

置内容

    popup.reset('content', '新文本内容，支持HTML', index);

置宽度/高度

    popup.reset('width', 300, index);
    popup.reset('height', 300, index);

置坐标位置

    popup.reset('position', [100,300], index);

关闭指定层

    popup.close(index);

关闭所有层

    //关闭所有loading
    popup.closeAll('loading');
    //关闭所有alert
    popup.closeAll('alert');
    //关闭所有msg
    popup.closeAll('msg');
    //关闭所有
    popup.closeAll();