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

Question

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

We use facebook.connect 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.

Igor Reshetnikov Igor Reshetnikov · Accepted Answer · 2011-01-21T06:25:04

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

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

2 Answers