Arrow in jQuery Dialog

Question

Is there any way by which I can show an arrow tip on left of jQuery dialog? I would like to achieve functionality as mentioned in image below. How to do this with Theme roller CSS and icons?

Answer 1

A simple method would be t simply add the html and / or css into your title attribute when constructing your dialog like so:

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

And the css for 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;
  }

Hope that helps a little

Answer 2

UPDATE: I posted my first answer BEFORE the edit was made, indicating that arrow was to be placed in the body of the dialog, so here is my updated code:

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

The myArrow div has been moved to the main content div of the dialog, CSS could be something like:

.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 3

DEMO: http://jsbin.com/ibipi4/2

• jQuery:

$(function() {
    $("#dialog").dialog({
        open: function(event, ui) {
            $('<div class="arrow-x"></div>').insertBefore('.ui-dialog-titlebar');
            $('#dialog').css({
                'width': '250px'
            }).addClass('ui-corner-all wrap-me');
            $('.ui-resizable-handle,.ui-dialog-titlebar').addClass('wrap-me');
            $('.wrap-me').wrapAll('<div id="new-dialog" class="ui-widget ui-widget-content ui-corner-all  ui-draggable ui-resizable">');
            $('<div class="clear"></div>').insertAfter('.wrap-me');
            $(".ui-dialog").css('width', '300px').removeAttr('class');
        }
    });
});

• CSS:

.arrow-x {
 background: url(../image.png) no-repeat 0 30%;
 width: 32px;
 height: 200px;
 position: relative;
 z-index: 9.99999;
 float: left
}
#dialog {
 background: #FFF;
 padding: 5px;
 margin: 2px
}
.clear {
 clear: both
}
#new-dialog {
 float: right;
 outline-width: 0px;
 outline-style: initial;
 outline-color: initial;
}
.ui-icon-closethick {
 float: right
}
.ui-dialog-titlebar {
 padding: 5px;
 margin: 2px
}