Question

如何在成功调用ajax后打开模态我需要自动触发模态窗口

<a class="main_blue_button" href="#complete_application_modal" id="applicationBtn">SIGN UP</a>

<div id="complete_application_modal">adsfadsf</div>

成功ajax调用后如何打开模态

    $.ajax({
type: "POST",
url: "<?php echo site_url(); ?>users/signUp_business",
data: $('#signup_form').serialize(),   
dataType: "json",
success: function(result){
//alert(result);
    if(result.error==0){
        $("#show_error").html("This email or phone is already registered!");
        //$("#business_email").focus(); 
            $("#busp_email").removeClass('field_validation_error hidden');
                $("#busp_email").addClass('field_validation_error');
                $("#bus_email").css("color","#f42156");
                hasError = true;
    }else if(result.success==1) {

    $("#signup_form")[0].reset();

    $("#applicationBtn").attr("href","#complete_application_modal");

    //$("#applicationBtn").attr("href", "#complete_application_modal").trigger('click');
        $("a").trigger("click");

    }

Answer 1

我认为如果您的主要目标是在ajax成功时显示模态窗口，您可以通过

进行操作

$('#complete_application_modal').show();

并可以通过

隐藏它

$('#complete_application_modal').show();

那你为什么要使用链接参考..？

Answer 2

这是允许此

的修改

    (function ($) {

    $.fn.animatedModal = function(options) {
        var modal = $(this);

        //Defaults
        var settings = $.extend({
            modalTarget:'animatedModal', 
            position:'fixed', 
            width:'100%', 
            height:'100%', 
            top:'0px', 
            left:'0px', 
            zIndexIn: '9999',  
            zIndexOut: '-9999',  
            color: '#39BEB9', 
            opacityIn:'1',  
            opacityOut:'0', 
            animatedIn:'zoomIn',
            animatedOut:'zoomOut',
            animationDuration:'.6s', 
            overflow:'auto', 
            // Callbacks
            beforeOpen: function() {},           
            afterOpen: function() {}, 
            beforeClose: function() {}, 
            afterClose: function() {},
            override: false
        }, options);

        var closeBt = $('.close-'+settings.modalTarget);

        //console.log(closeBt)

        var href = $(modal).attr('href'),
            id = $('body').find('#'+settings.modalTarget),
            idConc = '#'+id.attr('id');
            //console.log(idConc);
            // Default Classes
            id.addClass('animated');
            id.addClass(settings.modalTarget+'-off');

        //Init styles
        var initStyles = {
            'position':settings.position,
            'width':settings.width,
            'height':settings.height,
            'top':settings.top,
            'left':settings.left,
            'background-color':settings.color,
            'overflow-y':settings.overflow,
            'z-index':settings.zIndexOut,
            'opacity':settings.opacityOut,
            '-webkit-animation-duration':settings.animationDuration
        };
        //Apply stles
        id.css(initStyles);

        if (!settings.override) {
            modal.click(function(event) {
                event.preventDefault();
                open();
            });
        }

        closeBt.click(function(event) {
            event.preventDefault();
            $('body, html').css({'overflow':'auto'});

            settings.beforeClose(); //beforeClose
            if (id.hasClass(settings.modalTarget+'-on')) {
                id.removeClass(settings.modalTarget+'-on');
                id.addClass(settings.modalTarget+'-off');
            } 

            if (id.hasClass(settings.modalTarget+'-off')) {
                id.removeClass(settings.animatedIn);
                id.addClass(settings.animatedOut);
                id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterClose);
            };

        });

        function afterClose () {       
            id.css({'z-index':settings.zIndexOut});
            settings.afterClose(); //afterClose
        }

        function afterOpen () {       
            settings.afterOpen(); //afterOpen
        }

        function open() {
            $('body, html').css({'overflow':'hidden'});
            if (href == idConc) {
                if (id.hasClass(settings.modalTarget+'-off')) {
                    id.removeClass(settings.animatedOut);
                    id.removeClass(settings.modalTarget+'-off');
                    id.addClass(settings.modalTarget+'-on');
                }

                if (id.hasClass(settings.modalTarget+'-on')) {
                    settings.beforeOpen();
                    id.css({'opacity':settings.opacityIn,'z-index':settings.zIndexIn});
                    id.addClass(settings.animatedIn);
                    id.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', afterOpen);
                };
            }
        }

        return {
            open: open
        };
    }; 
}(jQuery));

你可以使用

触发

var service = $("#demo01").animatedModal({
    override: true
});
service.open();

Answer 3

animatedModal中的一个选项是 beforeOpen ，您可以使用此选项来调用ajax请求。像这样：

$("#modal-btn").animatedModal({
  modalTarget:'animatedModal',
  beforeOpen: function() {
    // ajax request call here
    // fill modal by data
  }
});

Answer 4

in success函数手动触发click事件。例如success : function(response){ $("#your-id-name").trigger('click'); }

成功ajax调用后如何触发animatedmodal窗口？

4 个答案: