How to close (hide) an FBML-dialog using the new Facebook JavaScript SDK?

I've wasted four hours today and several hairs trying to solve this issue but failed.

We use facebook.conne开发者_Python百科ct to authorize users on our site and perform various actions. One of these actions should trigger fbml:dialog, I decided to use new JavaScript SDK. Here's the function I use:

function popupModalWindow(cat) {
    var oldSize = FB.UIServer.Methods["fbml.dialog"].size;
    FB.UIServer.Methods["fbml.dialog"].size = {width: 402, height: 112};
    //FB.UIServer.id = FB.UIServer._active[id];

    var messages = {
        interesting:  '<p>By submitting my entry, I confirm that I have obtained permission from the persons whose picture and/or voice appears in my entry for use and publication in this contest as outlined in the Official Rules [link]</p>'
    };
    // alert(messages[cat]);
    FB.ui(
        {
            method: 'fbml.dialog',
            //id: 'ololo',
            display: 'dialog',
            width: 402,
            height: 112, /**/ //Should work that way according to the API reference
            size : {width: 402, height: 112},
            fbml: '<link rel="stylesheet" href="http://rentatext.mygrate.biz/styles.css"/><div class="modal-white" style="width: 402px;">'+
            '<h6>User Agreement</h6>'+
            '<fb:js-string var="oloe">document.getElementsByTagName("iframe")[0].id;</fb:js-string>'+
            '<div class="inner">'+messages[cat]+' <a class="fb-close" onclick="FB.UIServer._active[oloe].close()">i agree</a></div></div>'
            ,
        },
        function() {
            alert(1);
        }

    );
    console.debug(FB.UIServer);
}

Unfortunately, the designer made these modal windows with grey background and some users may not notice the default "close" button at the top right corner of dialog. What I need is to bind an event to some custom element that will close this dialog. I've tried different approaches but none of them worked.

The latest one throws "a138033292903816_FB is not defined" when I click a.fb-close with the onclick event handler. Maybe I'm missing something, I googled a lot but with no luck.

I have same trouble. Second day looking for a solution. And just found one way: for closing active FB dialog you should perform followed code in parent window where FB JS is available and where FB.ui was called:

FB.Dialog.remove(FB.Dialog._active);

So, in your case - please try use this JS in iframe:

parent.FB.Dialog.remove(parent.FB.Dialog._active);

Hope this help

Facebook renames all of your javascript functions and variables to a randomstring. Check out this. Maybe you could use CSS to change the modal's background?