$.fancybox is not a function (fancybox pop up ajax response)

I want to pop up the ajax response by fancybox, I saw the network section in console, the response is ok. But I am getting $.fancybox is not a function. thanks in advance!

$("#mysubmit").click(function(){
 var myvar = {
"secure_key":"41561541561561","username":$("#username").val(),"password" :$("#password").val()};

$.ajax({

    type: "POST",
    url: "http://127.0.0.1/ajaxtest.php",
    async: false,
    data: myvar,
    success: (function (response) {
        var result =
            "<div id='result'>" +
            "<p>" + response + "</p>" +
            "</div>";
        //$.facybox is not a function HERE
        $.fancybox(result, {
            type: "html",
        }); // show formated response
      })
   })

});

FancyBox has to be instanciated on an element.
You actually try to instanciate it on jQuery...

Try this:

success: (function (response) {
  var result =
    "<div id='result'>" +
    "<p>" + response + "</p>" +
    "</div>";

  $("body").append( $(result) );

  $(document).find("#result").fancybox(); // show formated response
})