在fancybox中即时显示ajax内容 [英] show ajax content in fancybox on fly

问题描述

我正在研究ajax，我想在成功后的精美框中显示内容.我已经通过jquery ui dialoge做到了，但是它的问题是我无法做到的覆盖.因此决定使用Finish.

i am working on ajax and i want to show the content after success in in a fancy box. i already did it through jquery ui dialoge but the problem with it is of overlay which i am unable to do. so decided to use finish.

function showCustomer()
{
// fire off the request to ajax_stufflist.php
request = $.ajax({
    url: "ajax_stufflist.php?"+url,
    type: "post",
    success: function(data){
    var $response = $(data).find("#gmp_stuff").html();
    $("#user_responses").html($response);
      $(function() {
            $( "#user_responses" ).dialog({
            modal: true,
            buttons: {
            Ok: function() {
            $( this ).dialog( "close" );
                           }
                     }
        });
    });
},
    error:function(){
        alert("failure");
        $("#user_responses").html('error occured');
        }
    });

}

或者如果有人可以使用dialoge在我的代码中设置覆盖，那么这也将是一个不错的选择，因为我尝试了很多来自Internet的代码，但没有运气.如果无法实现，请告诉我如何设置精美的包装盒.

or if someone can set overlay in my code with dialoge so it would also be a nice act as i tried a lot of code from internet but no luck. and if its not possible then tell me how to set fancy box.

推荐答案

要在fancybox中打开响应，请尝试

To open your response in fancybox try

function showCustomer() {
    // fire off the request to ajax_stufflist.php
    request = $.ajax({
        url: "ajax_stufflist.php?" + url,
        type: "post",
        success: function (data) {
            var $response = $(data).find("#gmp_stuff").html();
            $("#user_responses").html($response);
            // show user response in fancybox
            $.fancybox({
                // fancybox API options here
                href: "#user_responses"
            })
            /*
            $(function () {
                $("#user_responses").dialog({
                    modal: true,
                    buttons: {
                        Ok: function () {
                            $(this).dialog("close");
                        }
                    }
                });
            });
            */
        },
        error: function () {
            // or show error in fancybox 
            // alert("failure");
            $.fancybox("Failure: error occured");
            //$("#user_responses").html('error occured');
        }
    });
}

假设您已正确加载fancybox js和css文件

assuming that you have properly loaded the fancybox js and css files

这篇关于在fancybox中即时显示ajax内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！