Jquery ZURB基金会4动态揭示了模态加载标题、内容等。 我已经使用Zurb基金会了一段时间，最近遇到了一个我需要的例子：

1） 通过AJAX加载modal的内容（这里是np，非常简单）

2） 向模式中添加元素以包含动态标题

当我将一个启示编码为，比如，一个H3作为标题时，会发生什么。。AJAX调用覆盖所有内容，除了model HTML中的reveal close链接

我的目标是在links数据属性中设置模式的url、标题和其他选项，如下所示：

<a href="javascript:void(0);"
    data-target-url="/users/view.php?member_id={$conn->id}"
    data-modal-title="Contact Information"
    data-modal-class="large"
    data-button-id="modalButton1"
    data-button-txt="CLICK ME"                      
    class="bb-modal">

    <img src="/users/avatar.php?member_id={$conn->id}" alt="" />
</a>

以下是模式HTML代码：

    <div id="bb-modal" class="reveal-modal" data-reveal>
        <h3 class="modal-title">Information</h3>
        <div class="modal-body"></div>
        <div class="modal-footer"> 
            <button class="btn btn-primary modalsave" id="">Save</button>
        </div>
        <a class="close-reveal-modal">×</a>
    </div>

问询处
拯救
×

下面是我使用的JS，用于将变量设置为数据属性，然后手动将内容加载到.modal body div中：

        $('body').on('click','.bb-modal',function(e) {
        e.preventDefault();

        var targeturl = $(this).data('target-url'),
            modaltitle = $(this).data('modal-title'),
            modalclass = $(this).data('modal-class'),
            buttonid = $(this).data('button-id'),
            buttontxt = $(this).data('button-txt');

            //set the text of the modal title
            $('#bb-modal .modal-title').html(modaltitle);

            //add class to modal, if needed, to override modal size/placement
            $('#bb-modal').addClass(modalclass);

            // set the text of the save button
            $('#bb-modal .modalsave').html(buttontxt);

            // set the button.modalsave id so we can target the click function of it.
            $('#bb-modal .modalsave').attr("id",buttonid);  

            $('#bb-modal .modal-body').load(targeturl,function(response, status, xhr) {
                    if (status === 'error') {
                        $(target+ '.modal-body').html('<h2>Oh No!</h2><p>Sorry, but there was an error:' + xhr.status + ' ' + xhr.statusText+ '</p>');
                    }

            }).foundation('reveal', 'open');    // end load

    }); // end on click

$（'body'）。在（'click'，'bb modal'，函数（e）上{
e、 预防默认值（）；
var targeturl=$（this）.data（'target-url'），
modaltitle=$（this）.data（'modal-title'），
modalclass=$（this）.data（'modal-class'），
buttonid=$（this）.data（'button-id'），
buttonText=$（this.data（'button-txt'）；
//设置模式标题的文本
$（'#bb modal.modal title'）.html（modaltite）；
//如果需要，将类添加到模态以覆盖模态大小/位置
$（'bb modal'）.addClass（modalclass）；
//设置保存按钮的文本
$（'#bb modal.modalsave'）.html（buttonText）；
//设置button.modalsave id，以便我们可以针对它的单击功能。
$（'bb modal.modalsave'）.attr（“id”，buttonid）；
$（'#bb modal.modal body'）.load（targeturl，函数（响应，状态，xhr）{
如果（状态=='错误'）{
$（target+'.modal body'）.html（'哦，不！很抱歉，出现了一个错误：'+xhr.status+''+xhr.statusText+'
）；
}
}).foundation（'leaver'，'open'）；//端部荷载
}); // 点击结束

必须有一种更干净、更有效的方法来实现这一目标。。因此，我可以通过链接数据属性设置标题、按钮文本/ID等，然后在不覆盖模式中所有内容的情况下加载模式

---

非常感谢您的帮助！。。。。到目前为止，我的书桌有一个很大的凹痕，我的头在折磨我：D < /P> < P>我决定停止使用这个基础来揭示本机函数，并利用jQuery的Ajax来加载我需要的内容。因此，以下是我的结论：

链接到消防模式：

<a href="javascript:void(0);"
    data-target-url="http://fiddle.jshell.net/revive/mkfty/show/"
    data-modal-title="Contact Information"
    data-modal-class="large"
    data-button-id=""
    data-button-txt="TEST"                      
    class="button bb-modal">Click Me
</a>

    <div id="bb-modal" class="reveal-modal" data-reveal>
        <h3 class="modal-title">Information</h3>
        <div class="modal-body"></div>
        <div class="modal-footer"> 
            <button class="btn btn-primary modalsave" id="">Save</button>
        </div>
        <a class="close-reveal-modal">×</a>
    </div>

        $('body').on('click','.bb-modal',function(e) {
        e.preventDefault();

        var modal = $('#bb-modal'),
            targeturl = $(this).data('target-url'),
            modaltitle = $(this).data('modal-title'),
            modalclass = $(this).data('modal-class'),
            buttonid = $(this).data('button-id'),
            buttontxt = $(this).data('button-txt');

            //set the text of the modal title
            modal.find('.modal-title').html(modaltitle);

            //add class to modal, if needed, to override modal size/placement
            modal.addClass(modalclass);

            // set the text of the save button
            modal.find('.modalsave').html(buttontxt);

            // set the button.modalsave id so we can target the click function of it.
            modal.find('.modalsave').attr("id",buttonid);  

            if(buttonid != '' || buttontxt != ''){
                modal.addClass('show-footer');
            }

            modal.foundation('reveal', {
                open: function () {    
                    $.ajax({
                        url: targeturl,
                        dataType: "html"
                    })
                    .done(function( html ) {
                        modal.find('.modal-body').html(html);
                    })
                    .fail(function( jqXHR, textStatus ) {
                        modal.find('.modal-body').html( "Request failed: " + textStatus );
                    });
                },
                close: function () {

                }
            }).foundation('reveal','open');

            modal.on('closed', function(){ 
                modal.removeClass(modalclass);                  
                modal.find('.modal-body').empty();
                modal.find('.modal-footer').hide();
                modal.find('.modal-title').html('');
                modal.find('.modalsave').html('Save').removeAttr("id");
            }); // end on close

        }); // end on click

        $('[data-dismiss="modal"]').on('click',function(){
            $(this).closest('.reveal-modal').find('.close-reveal-modal').trigger('click');
        });