jQuery对话框中的箭头 [英] Arrow in jQuery Dialog

问题描述

有什么方法可以在jQuery对话框的左边显示箭头提示？我想实现如下图所示的功能。如何使用Theme roller CSS和图标进行操作？

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?

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

推荐答案

更新：我发布了我的第一个答案是在编辑之前，表示箭头被放置在对话框的正文中，所以这是我的更新代码：

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

myArrow div已被移动到对话框的主内容div，CSS可能是这样的：

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

这篇关于jQuery对话框中的箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！