Flèche dans jQuery Dialog

Question

Existe-t-il un moyen par lequel je peux afficher une flèche sur la gauche de la boîte de dialogue jQuery? Je voudrais réaliser la fonctionnalité comme mentionné dans l'image ci-dessous. Comment faire avec des rouleaux CSS et des icônes?

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

Answer 1

UP DATE: J'ai posté ma première réponse avant la modification a été faite, ce qui indique que la flèche devait être placée dans le corps de la boîte de dialogue, alors voici mon code mis à jour:

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

Le myArrow div a été déplacé vers la principale div contenu de la boîte de dialogue, CSS pourrait être quelque chose comme:

.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

Une méthode simple serait t il suffit d'ajouter le code html et/ou css dans votre attribut title lors de la construction de votre dialogue comme ceci:

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

Et le css pour 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; 
    } 

L'espoir qui aide un peu