Fancybox overlay is covering content

Question

I've been having this problem for months now. What I'm trying to do is open a fancybox on page load. My code populates the fancybox with AJAX data.

The code is working, but for some reason the overlay is covering the content. When I look at the html, the content is nested within the overlay instead of being a separate element outside of the overlay.

I've tried every solution on the internet and still can't seem to solve this issue. It only occurs when I do an AJAX load into the fancybox via code. Meaning: I'm not using a hyperlink. I tried using a hyperlink and calling .trigger("click")...doesn't work.

@if(deniedUsersListCnt > 0){
    <script>
        $(document).ready(function () {
            fancyBoxAjaxGet("/UsersAdmin/_ShowListOfDeniedUsers");
        });
    </script>
}

function fancyboxAjaxGet(dUrl){
    $.fancybox.open({
        href: dUrl,
        type: "ajax",
        ajax: {
            type: "GET"
        }
    });
}

I'm using fancybox version 2.1.5 and JQuery version 2.1.1.

Answer 1

What I did was this: $(".fancybox-wrap").insertBefore($(".fancybox-overlay"));