Question

我一直在使用Zurb的基金会，最近遇到了我需要的实例：

1）通过AJAX加载模态的内容（np那里，很容易）

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

当我将一个透明代码编写为一个标题的H3时，会发生什么呢？AJAX调用会覆盖除模式HTML中的reveal-close链接之外的所有内容。

我的目标是在链接数据属性中设置模态的url，title和其他选项，如下所示：

<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，将VARS设置为数据属性，然后手动将内容加载到.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

有一个更清晰，更有效的方法来使这个工作..所以我可以通过链接数据属性设置标题，按钮文本/ ID等，然后加载模式没有Foundations Reveal JS覆盖所有模态中的内容......

任何帮助都非常感谢！....截至目前，我的办公桌有一个大凹痕，我的脑袋正在杀了我：D

Answer 1

我决定停止使用Foundation Reveals本机函数并利用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>

模式的JS代码，带有显示/隐藏模式FOOTER（以及按钮）的选项在基础上和基础之后（）调用（还包括用于页脚中关闭模态链接的js，因为它们取消了数据关闭=“模态“）：

        $('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');
        });

Zurb Foundation 4显示模态 - 动态加载模态标题，内容等

1 个答案: