Javascript 将JQuery对话框放置在另一个div上

我在单击按钮（添加到购物车按钮）时显示一个JQuery对话框。JQuery对话框显示消息“x项已添加到购物车”，并在y秒内自动关闭。我想在“添加到购物车”按钮上准确显示对话框。“添加到购物车”仅在对话框自动关闭后才可见。我该怎么做？

将

位置更改为以下内容：

$dialog.dialog({
  autoOpen: false,
  modal: false,
  position: {
      my: 'left top',      //The point on the dialog box
      at: 'left top',      //The point on the target element
      of: $('#addtocart')  //The target element
  },
  draggable: true,
  width: '40%'
});

jsiddle:
发布前请阅读：-在寻求帮助之前，您需要包含代码和/或尝试解决问题。@Keerthi，您使用的是jQuery UI吗？你能给我们看一下你的HTML/JS/CSS代码关于“添加到购物车”按钮和对话框吗？@BrunnoVodolaMartins这是对话框在中间打开的小提琴。我想将对话框定位在“添加到购物车”按钮的正上方。我试着添加到：“#addtocart”，但没有help@TylerRoper这是我想要实现的一个屏幕投影。@Keerth我检查我的答案。太好了！谢谢，这正是我想要的。这是一个响应页面。因此，按钮的宽度将根据其所在的设备（桌面视图、平板视图和移动视图）而有所不同。我可以将对话框的宽度设置为与目标项目的宽度匹配吗？请尝试将
宽度：40%
更改为
宽度：$（“#addtocart”）.width（）
我有一些东西要添加。。。我在网页上有一个项目列表。产品img Prd名称添加到购物车按钮产品img Prd名称添加到购物车按钮。。按钮的id上是“addtobag”，但类是相同的“addtobag”。在上面的示例中，我有一个页面，其中列出了四项。我单击第三项上的按钮。JQuery对话框应该位于第三行的addtocart按钮的顶部。我需要找到最接近addtobag类的id，并将对话框放置在该按钮上。我做不到。