Arrow in jQuery Dialog

Question

C'è un modo in cui posso mostrare una punta di freccia a sinistra della finestra di dialogo jQuery? Mi piacerebbe ottenere funzionalità come indicato nell'immagine qui sotto. Come fare questo con il rullo a tema CSS e icone?

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

Answer 1

SU DATA: Ho inviato la mia prima risposta prima della modifica è stata fatta, indicando che la freccia era da collocare nel corpo della finestra di dialogo, ecco il mio codice aggiornato:

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'}); 

Il div myArrow è stata spostata alla principale il contenuto div della finestra di dialogo, CSS potrebbe essere qualcosa di simile:

.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 metodo semplice sarebbe t è sufficiente aggiungere il codice html e/o CSS nel vostro attributo title quando si costruisce la vostra finestra in questo 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') 

E il CSS per 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; 
    } 

Speranza che aiuti un po '