弹层

概述用法

创建拥有不同样式和过渡形式的模态对话框。一般常规做法是在页面添加隐藏的弹层div元素

HTML结构上参照ui规范,页面上一有弹层html结构代码。可以通过配置data-target="弹层id"及data-toggle="modal"调用触发。

a链接打开

    
        <a href="#modal-1" data-toggle="modal" class="btn default small-btn">a链接打开 </a>
        

        <button data-target="#modal-1" data-toggle="modal" class="btn default small-btn">button打开 </button>

自定义弹层

当页面并没有我们要弹层的dom元素时，我们通过调用$(#自定义id).modal(title, content)的方法来自定义弹层。

var i = 0;
$('#j-pop').on('click', function(){
    // 自定义弹层使用 $(自定义弹层id).modal({ title: '标题', content: '内容'});
    $('#testModal').modal({title: '提示'+ (i++), content: 'aaaa'+ i});
})

事件监听

show.ui.modal监听弹层显示

hide.ui.modal监听弹层显示

a链接打开


// 监听弹层#modal-2的弹出和隐藏动作
$('#modal-2').on('show.ui.modal', function(){
        alert('弹出');
    });
    

    $('#modal-2').on('hide.ui.modal', function(){
         alert('隐藏');
    })

加载层

$(自定义id).showLoading()显示加载层

$(自定义id).hideLoading()关闭加载层

a链接打开

$(function(){
    $('#j-loading').on('click', function(){
      // 显示加载层 $(自定义id).showLoading(提示内容);
      $('#myLoading').showLoading('正在处理');
        setTimeout(function(){
            // 隐藏加载层,关闭#myLoading加载层
          $('#myLoading').hideLoading();
         }, 3000)

         /*
         // 异步
         $.get(url).done(function(){
            $('#myLoading').hideLoading();
         })
          */
      })
    })

弹框对话框

基于modal的带icon弹层, 所有按钮点击默认关闭层

参数配置

属性	描述	示例
`'title'`	`提示标题`
`'icon'`	状态提示图标`success\|error\|info`
`'content'`	`提示副标题`
`'buttons'`	自定义按钮`text 按钮文字 href 填写了为显示a链接地址不为按钮 style 按钮样式名，默认 btn primary ok 按钮回调`
	重置更新文字 `{title: '新标题', content: '这里是什么', icon: 'success'}`
	不带有关闭按钮 `{title: '新标题', content: '这里是什么', icon: 'success', close: false}`

$('.j-modal').on('click', function(){
        var data = $(this).data();
        if(data.ok) {
            data.buttons = [
                {
                    text: '确定',
                    ok: function(){
                        alert('我是个2b');
                        // 使用return false，则点击按钮不关闭层
                        //return false;
                    }
                },
                {
                    text: '返回修改',
                    href: 'pagination.html',
                    style: 'btn links'
                }
            ];
        }
        $('#'+data.id).modalLayer(data);
    })

    /**
     // 1.提示标题
     $('#j-modalLayer-1').modalLayer({title: '自定义title'});

     // 2.自定义icon
     $('#j-modalLayer-2').modalLayer({ title: '自定义title', icon: 'success'})

     // 3. 自定义副标题
        $('#j-modalLayer-3').modalLayer({ title: '自定义title', icon: 'info', content: '我是副标题可以是html代码'})

     // 4. 自定义按钮
     $('#j-modalLayer-4').modalLayer({
        title: '自定义title',
        icon: 'error',
        content: '我是副标题可以是html代码',
        buttons: [
                    {
                        text: '确定',
                        ok: function(){
                            alert('我是个2b');
                            // 使用return false，则点击按钮不关闭层
                            //return false;
                        }
                    },
                    {
                        text: '返回修改',
                        href: 'pagination.html',
                        style: 'btn links'
                    }
                ];
     })

    // 更新内容
    $('#j-modal-btn-5').on('click', function(){
            $('#j-modal-4').modalLayer({title: '新标题', content: '这里是什么', icon: 'success'});
        })
     */

alert,confirm,success,close扩展

我们对自定义弹层进行了扩展了四个方法,分别是$.successModalLayer()、$.confirmModalLayer()、$.alertModalLayer()、$.closeModalLayer()

successModalLayer

属性	描述	示例
`id`	`string`弹层元素标识	`$.successModalLayer({id: '#test', title: 'xxxx'});`
`title`	`string`提示标题	`$.successModalLayer({ title: 'xxxx'});`
`content`	`string`提示副标题	`$.successModalLayer({ title: 'xxxx', content: 'oooooo'});`
`link`	`string`确定按钮链接，优先于`callback`	`$.successModalLayer({ title: 'xxxx', content: 'oooooo', link: 'http://www.frontpay.cn'});`
`callback`	`function` 确定回调	`$.successModalLayer({ title: 'xxxx', content: 'oooooo', callback:function(){ alert('ok') }});`

confirmModalLayer

属性	描述	示例
`id`	`string`弹层元素标识	`$.confirmModalLayer({id: '#test', title: 'xxxx'});`
`title`	`string`提示标题	`$.confirmModalLayer({ title: 'xxxx'});`
`content`	`string`提示副标题	`$.confirmModalLayer({ title: 'xxxx', content: 'oooooo'});`
`callback`	`function` 确定回调	`$.confirmModalLayer({ title: 'xxxx', content: 'oooooo', callback:function(){ alert('ok') }});`

alertModalLayer

属性	描述	示例
`id`	`string`弹层元素标识	`$.alertModalLayer({id: '#test', title: 'xxxx'});`
`title`	`string`提示标题	`$.alertModalLayer({ title: 'xxxx'});`
`content`	`string`提示副标题	`$.alertModalLayer({ title: 'xxxx', content: 'oooooo'});`
`icon`	`string` 图标的类型 `success\|error\|info`	`$.alertModalLayer({ title: 'xxxx', content: 'oooooo', icon: 'success'});`

closeModalLayer

$.closeModalLayer(id)同$(id).modal('hide')


// 成功
$('#btn-success').on('click', function(){
    $.successModalLayer({ title: '操作成功', content:'数据已保存到后台', callback: function(){
        alert('ok');
    } });
});

// 询问
$('#btn-confirm').on('click', function(){
    $.confirmModalLayer({ title: '确定取消当前用户', content:'取消用户后将不可以再登录！', callback: function(){
        alert('ok');
    } });
});

// 警告
$('#btn-alert').on('click', function() {
    $.alertModalLayer({ title: 'xxx', content: 'ooo' });
})

表单

* 标准表单标题宽度可以放十八个中文字符：

* 请输入密码：

忘记密码

* dropdown :

Data in form ：

陈少峰

招商银行 | 尾号1234

Data in form ：

14,000.00 元

部分款项未到期

提现明细

Data in form ：

06月18日24点前

* 输入验证码 :

button link

$(function(){
    $('#j-loading').on('click', function(){
      // 显示加载层 $(自定义id).showLoading(提示内容);
      $('#myLoading').showLoading('正在处理');
        setTimeout(function(){
            // 隐藏加载层,关闭#myLoading加载层
          $('#myLoading').hideLoading();
         }, 3000)

         /*
         // 异步
         $.get(url).done(function(){
            $('#myLoading').hideLoading();
         })
          */
      })
    })

iframeModal 支持 iframe 方式

直接用a标签打开，需在元素上加上属性data-toggle="iframeModal"、data-url、data-title

属性	描述	示例
`id`	`string`弹层元素标识	`$.iframeModal({id: '#test', title: 'xxxx'});`
`title`	`string`提示标题	`$('#xxx').iframeModal({ title: 'xxxx'});`
`url`	`string`访问地址	`$('#test').iframeModal({ title: 'xxxx', url: 'http://www.frontpay.cn'});`
`width`	`string\|number`iframe宽度	`$('#test').iframeModal({ title: 'xxxx', url: 'http://www.frontpay.cn', width:'100%'});`
`height`	`string\|number`iframe 高度	`$('#test').iframeModal({ title: 'xxxx', url: 'http://www.frontpay.cn', height: 1000});`

钱沿支付官网


$('#btn-iframe').on('click', function() {
    $('#test').iframeModal({
        title: '钱沿支付',
        url: 'http://www.frontpay.cn',
        width: '100%',
        height: 1000
    })

    // 关闭
    // $('#test').iframeModal('hide')
})