Facebook Cookbook

Displaying Contextual Dialogs

Problem

I want to display a nifty contextual dialog that points to one of my DOM objects.

Solution

Contextual dialogs are really a variation of the pop-up dialog covered in Displaying Pop-Up Dialogs, so take a moment to read that recipe first. The main differences are in your call to the Dialog() constructor and in the call to setContext(), which establishes which DOM object the dialog should point to (see Figure 7-6):

var myDialog = new Dialog(Dialog.DIALOG_CONTEXTUAL);
myDialog.setContext(document.getElementById('attachToMe'));
myDialog.showMessage('Look at Me!', 'Check this out!', button_confirm='Cool!');

Figure 7-6. Contextual dialog

Discussion

All of the same tidbits that apply to pop ups apply to contextual dialogs as well, including the ability to set up an <fb:js-string> for use as the body:

<fb:js-string var="messageText">
    Hi <fb:name uid="<?php echo $user?>"
            firstnameonly="true"
            linked="false"
            useyou="false"/>!
</fb:js-string>

<script type="text/javascript">
<!--
var myDialog = new Dialog(Dialog.DIALOG_CONTEXTUAL);
myDialog.setContext(document.getElementById('attachToMe'));
myDialog.showMessage('Message for you!', messageText, button_confirm='Thanks!');
//-->
</script>

That should give you a dialog something like Figure 7-7.

Figure 7-7. Contextual dialog ...