代码之家 › 专栏 › 技术社区 › MikeiLL

将jquery对象复制到modal,然后隐藏或显示,然后显示

modal-dialog jquery javascript

MikeiLL · 技术社区 · 6 年前

我只想在用户登录(通过Ajax)时在模式中显示页脚。

我希望页脚本身包含在HTML主页中,其他用户可以将其覆盖。

所以我在主页上有一个隐藏的容器:

<div style="display:none" id="signupModalFooterContainer">
    <div class="modal__footer btn-group" class="signupModalFooter">
        You are logged in
    </div>
</div>

我可以将其添加到弹出内容:

popUpContent += $('#signupModalFooterContainer').html();

如何使浏览器在运行之间重新绘制模式内容 $('.signupModalFooter').show() 或 $('.signupModalFooter').hide() 添加到窗口后?

2 回复 | 直到 6 年前

Cesar Bielich 6 年前

在显示前清空并替换HTML内容

if (loggedin == 'yes') {
    $('.signupModalFooter').html('You are logged in');
} else {
    $('.signupModalFooter').html('');
}
$('.signupModalFooter').show();

MikeiLL 6 年前

我最后所做的,由导师推荐,是

创建一个“状态对象”,跟踪“登录”状态并保存各种其他属性。
创建两个render()函数,一个用于呈现模式主内容,另一个用于呈现模式内事件显示反馈时的内部内容。

状态对象如下所示:

var my_state = {

    logged_in: (wordpress_i18n_key.loggedIn == 1) ? true : false,
    message: undefined,
    inner_container: '<div id="innerDiv"></div>',
    other_attribute: undefined,

    // Grab the login form from a hidden container in the DOM
    login_form: $('#LogInContainer').html(),

    initialize: function(target){
            this.target = $(target).attr("href");
            this.siteID = $(target).attr('data-someData');
    }

}

在哪里? wordpress_i18n_key.loggedIn 是WordPress在 <script></script> 标记使PHP变量可用于JavaScript。

此函数呈现主要模式内容:

function render_modal(){
    var message = (my_state.message ? '<p>'+my_state.message+'</p>' : '');
    my_state.wrapper = '<div class="modal__wrapper" id="wrapperDiv">';
    if (my_state.logged_in){
        my_state.wrapper += my_state.header;
        my_state.wrapper += '<div class="modal__content" id="contentDiv">'+message+my_state.signup_button+'</div>';
        my_state.wrapper += my_state.footer;
    } else {
        my_state.wrapper += my_state.header;
        my_state.wrapper += '<div class="modal__content" id="contentDiv">'+message+my_state.login_form+'</div>';
    }
    my_state.wrapper += '</div>';
    if ($('#cboxLoadedContent')) {
        $('#cboxLoadedContent').html(my_state.wrapper);
    }
    my_state.message = undefined;
}

在哪里? #cboxLoadedContent 是colorbox.js模式中的主容器。

然后对于应该显示反馈的活动部分模式:

function render_inner_modal_activity(){
    my_state.content = '';
    $('#innerDiv').html = '';
    if (my_state.action == 'processing'){
        my_state.content += my_state.spinner;
    } else if (my_state.action == 'login_failed') {
        my_state.content += my_state.message;
        my_state.content += my_state.login_form;
    } else {
        // login, sign_up_form, etc
        my_state.content += my_state.message;
    }
    if ($('#innerDiv')) {
        $('#innerDiv').html(my_state.content);
    }
}

当用户单击模式页按钮时:

/**
 * Initial Modal Window to Register for a Class
 *
 * Also leads to options to login and sign-up with API
 *
 */
$(document).on('click', "a[data-target=someButton]", function (ev) {
    ev.preventDefault();
    my_state.initialize(this);
    render_mbo_modal();
    $("#modalContainer").load(my_state.target, function () {
        $.colorbox({html: my_state.wrapper,  href: my_state.target});
        $("#modalContainer").colorbox();
    });

});

填写模态表,反馈保持模态:

/**
 * Sign In to API
 */
$(document).on('submit', 'form[id="login"]', function (ev) {
    ev.preventDefault();

    var form = $(this);
    var formData = form.serializeArray();
    var result = { };
    $.each($('form').serializeArray(), function() {
        result[this.name] = this.value;
    });

    $.ajax({
        dataType: 'json',
        url: mz_mindbody_schedule.ajaxurl,
        type: form.attr('method'),
        context: this, // So we have access to form data within ajax results
        data: {
                action: 'client_log_in',
                form: form.serialize()
            },
        beforeSend: function() {
            my_state.action = 'processing';
            render_mbo_modal_activity();
        },
        success: function(json) {
            var formData = $(this).serializeArray();
            var result = { };
            $.each($('form').serializeArray(), function() {
                result[this.name] = this.value;
            });
            if (json.type == "success") {
                my_state.logged_in = true;
                my_state.action = 'login';
                my_state.message = json.message;
                render_mbo_modal();
            } else {
                my_state.action = 'login_failed';
                my_state.message = json.message;
                render_mbo_modal_activity();
            }
        } // ./ Ajax Success
    }) // End Ajax
        .fail(function (json) {
            my_state.message = 'ERROR SIGNING IN';
            render_mbo_modal_activity();
            console.log(json);
        }); // End Fail

});

这是模型最初引用的外部容器:

<div class="modal fade" id="modalContainer" tabindex="-1" role="dialog" aria-labelledby="mzSmallModalLabel" aria-hidden="true"></div>