Flecha en el cuadro de diálogo de jQuery

Question

¿Hay alguna manera de mostrar una punta de flecha a la izquierda del cuadro de diálogo de jQuery? Me gustaría lograr la funcionalidad que se menciona en la imagen a continuación. ¿Cómo hacer esto con Theme roller CSS e íconos?

jQuery Dialog Customization http://www.freeimagehosting.net/uploads/74b51bb861.jpg

Answer 1

UP FECHA: He publicado mi primera respuesta antes de la edición se hizo, lo que indica que la flecha iba a ser colocado en el cuerpo del cuadro de diálogo, por lo que aquí está mi código actualizado:

var $mydialog = $('<div></div>').html('<div class="myArrow"></div>Your Dialog Content Here').dialog({autoOpen: false,title: 'Retrieving Product Details', modal:true, width:600, height:400, position:'center'}); 

El div myArrow se ha movido a la principal div contenido del cuadro de diálogo, CSS podría ser algo como:

.myArrow{ 
    display:block; 
    position:absolute; 
    width:15px; 
    height:15px; 
    left:-15px; /* pushes the arrow OUTSIDE the box */ 
    top:50px; /* or however far from the top you wish */ 
    background: url(path/to/arrow.jpg) center right no-repeat; 
    margin:0 15px 0 0; 
    } 

Answer 2

Un método simple sería t sólo tiene que añadir HTML y/o CSS en su atributo de título cuando se construye el diálogo de este modo:

var $mydialog = $('<div></div>').html('Your Dialog Content Here').dialog({autoOpen: false,title: '<div class="myArrow"></div>Retrieving Product Details', modal:true, width:600, height:400, position:'center'}); 

$mydialog.dialog('open'); //triggers dialog open event, can close with ('close') 

Y el css para myArrow:

.myArrow{ 
    display:block; 
    float:left; 
    clear:none; 
    width:15px; 
    height:15px; 
    background: url(path/to/arrow.jpg) center center no-repeat; 
    margin:0 15px 0 0; // some maring on the right to push title away from div; 
    } 

Espero que ayude un poco