点击按钮触发模态框

模态框

使用方法

<a data-toggle="front-modal" class="btn btn-default" data-title="FreeShare" data-href="template/modal_content1.jsp">模态框</a>

自定义属性介绍

data-toggle  : front-modal // 该元素点击事件将触发前端模态框
[data-title] : 模态框标题
data-href    : 内容url
[data-size]  : [modal-lg] | [modal-sm] // 模态框大小

模态框内容示例(modal_content1.jsp)

<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>

<div class="modal-body">
    Success is getting what you want, happiness is wanting what you get.<br>成功是得其所想,幸福是想其所得!
</div>
<div class="modal-footer">
    <a href="#" class="btn btn-default" data-dismiss="modal">取消</a><a href="javascript:void(0)" class="btn btn-primary">确定</a> <!-- 注意按钮换行会导致多余的外补(margin) -->
</div>

在模态框中如何使用js

若需要在模态框中进行js操作,如验证参数,提交请求等,有两种解决方案。
其一是将js代码写在data-href返回的jsp页面中。如在上面的例子中,即写在modal_content1.jsp页面中。
其二是使用自定义事件shown.fr.modal。触发该事件时,模态框中的元素均已就绪。
示例如下

    $('[data-toggle="front-modal"]').on('shown.fr.modal', callback)

    function callback(event, modal) {
        console.log($(modal).find('.modal-body').html())
    }

说明: $('[data-toggle="front-modal"]')是触发模态框的元素
事件回调函数说明
/*
* event: 事件变量
* modal: 模态框对象,注意不是jquery对象。
*/
function (event, modal)

关闭模态框

function callback(event, modal) {
    // do something
    ...

    // close modal
    $(modal).modal('hide')
}

获取触发模态框元素

function callback(event, modal) {
    console.log(event.target)
}

通过函数生成模态框

/*
    option = {
        size: '',
        title: '',
        href: ''
    }

    return $modal
*/
$.frontModal(option);

demo

$.frontModal({size: 'modal-md', href: 'template/modal_content1.jsp'}).on('shown.bs.modal', function () { console.log('hello world'); })