Home/ Questions/Q 6200601
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T04:23:56+00:00

Currently i am showing fbml.dialog like this : FB.ui( { ‘method’: ‘fbml.dialog’, ‘display’: ‘dialog’,

  • 0

Currently i am showing fbml.dialog like this : 

 FB.ui(
   {
     'method': 'fbml.dialog',
     'display': 'dialog',
     'fbml': "<h1>this is some fbml markup</h1>",
     'width': 575
   },
   function() {
     alert(true, 'callback was invoked');
   }
 );

How to show the blue colored facebook header(with close button) on this dialog?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is not really an answer to your question but I too got frustrated with trying to get my Facebook dialogues rendering so instead I used JQuery UI and used the following styles (assumes dialogue id is ‘dialogue’).

    /* Facebook Dialogue Styles */
.ui-widget-overlay {background: none;}
.ui-dialog{background: rgba(82, 82, 82, 0.7);padding:10px;border-radius: 8px;-webkit-border-radius: 8px;}
.ui-dialog .ui-dialog-titlebar{background: #6D84B4;border: 1px solid #3B5998;font-family: "lucida grande",tahoma,verdana,arial,sans-serif;color: white;font-size: 14px;font-weight: bold;}
#dialogue{border-left: 1px solid #555;border-right: 1px solid #555;border-bottom: 1px solid #CCC;background-color:#FFF;padding:0px;overflow:hidden}
#dialogue p, #dialogue div{font-family: "lucida grande",tahoma,verdana,arial,sans-serif;font-size:13px;}
.ui-widget-content{background: none none 50% top repeat-x;border:none;}
.ui-dialog-titlebar-close{display:none}
.ui-dialog .ui-corner-all{-moz-border-radius: 0px;-webkit-border-radius: 0px;border-radius: 0px;}
.ui-dialog .ui-dialog-buttonpane{background: #F2F2F2; margin:0;border-left: 1px solid #555;border-right: 1px solid #555;border-bottom: 1px solid #555;padding:8px}
.ui-dialog .ui-dialog-buttonpane button{ margin:0;padding:2px 6px;}
.ui-state-default, .ui-widget-content .ui-state-default{border-color: #29447E;color: #FFF;background:#6D84B4;}
.ui-state-hover, .ui-widget-content .ui-state-hover{border-color: #29447E;background:#6D84B4;}
.ui-state-active, .ui-widget-content .ui-state-active{background: #4F6AA3;border-bottom-color: #29447E;box-shadow: 0 1px 0 rgba(0, 0, 0, .05); -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .05);}
.ui-button-text-only .ui-button-text {padding:0px}
.ui-dialog .ui-dialog-titlebar {padding: 5px;}

    I hope this helps.

    • 0