show ajax content in fancybox on fly

问题

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

}

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.

回答1:

I just tried your code and it works for me. If you specifically don't see overlay effect, like fading of all the other content, it may be because you forgot to include jquery-ui .css file along with .js

回答2:

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

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

来源：https://stackoverflow.com/questions/19618749/show-ajax-content-in-fancybox-on-fly

标签

javascript

jquery-ui

jquery

fancybox