Javascript jquery弹出窗口实例复制问题

有人能看一下代码吗？这里是问题截图

当点击侧栏用户时，在点击弹出标题后会出现一个弹出窗口，它会下降，如果有人从侧栏点击同一用户，则会创建一个重复实例，点击标题会使第一个出现，第二个下降

我想停止重复，当有人再次点击侧边栏用户，然后已经生成的弹出窗口将切换。

类似Facebook的聊天弹出式布局
用户1
用户2
$（文档）.ready（函数（）{
var arr=[]；//用户列表
$（document）.on（'click'，'msg_head'，function（）{
var chatbox=$（this.parents（）.attr（“rel”）；
$（'[rel=“'+chatbox+'].msg_wrap'）。滑动切换（'slow'）；
返回false；
});
$（文档）.on（'单击'，'.close'，函数（）{
var chatbox=$（this.parents（）.parents（）.attr（“rel”）；
$（'[rel=“'+chatbox+'“]'）。隐藏（）；
arr.splice（$.inArray（聊天室，arr），1）；
displayChatBox（）；
返回false；
});
$（文档）。在（'单击'，'侧栏用户框'，函数（）上）{
var userID=$（this.attr（“类”）；
var username=$（this.children（）.text（）；
if（$.inArray（userID，arr）！=-1）
{
arr.splice（$.inArray（userID，arr），1）；
}
arr.unshift（userID）；
chatPopup=''+
''+用户名+
“x”+
'    '+
'       ' ;                   
$（“正文”）。追加（弹出窗口）；
displayChatBox（）；
});
$（文档）.on（'keypress'，'textarea'，函数（e）{
如果（e.keyCode==13）{
var msg=$（this.val（）；
$（this.val（“”）；
如果（msg.trim（）.length！=0）{
var chatbox=$（this.parents（）.parents（）.parents（）.attr（“rel”）；
$（''+msg+''）.insertBefore（'[rel=“'+chatbox+'].msg_push'）；
$（'.msg_body'）.scrollTop（$（'.msg_body'）[0].scrollHeight）；
}
}
});
函数displayChatBox（）{
i=270；//起始位置
j=260；//下一个位置
$.each（arr，函数（索引，值）{
如果（指数<4）{
$（'[rel=“'+value+'“]”）css（“右”，i）；
$（'[rel=“'+value+'“]'）。show（）；
i=i+j；
}
否则{
$（'[rel=“'+value+'“]'）。hide（）；
}
});     
}
});

我添加了一个复选框，可以查看您是否已经有一个带有该用户名的聊天框：

var exist = $('.msg_box[rel="' + userID + '"]').length;

if (exist == 0) {


  arr.unshift(userID);
  chatPopup = '<div class="msg_box" style="right:270px" rel="' + userID + '">' +
    '<div class="msg_head">' + username +
    '<div class="close">x</div> </div>' +
    '<div class="msg_wrap"> <div class="msg_body">  <div class="msg_push"></div> </div>' +
    '<div class="msg_footer"><textarea class="msg_input" rows="4"></textarea></div>     </div>  </div>';

  $("body").append(chatPopup);
  displayChatBox();
}

用户1
用户2

您好，谢谢复制问题解决了。如果已经生成弹出窗口，是否可以切换弹出窗口。@hamzasgd现在尝试运行演示@`Carsten Løvbo Andersen:检查我更新了小提琴，发现有一个小问题@hamzasgd Fixed检查演示@`Carsten Løvbo Andersen现在它们重叠了，单击“关闭”按钮后无法打开再创造一次。

var exist = $('.msg_box[rel="' + userID + '"]').length;

if (exist == 0) {


  arr.unshift(userID);
  chatPopup = '<div class="msg_box" style="right:270px" rel="' + userID + '">' +
    '<div class="msg_head">' + username +
    '<div class="close">x</div> </div>' +
    '<div class="msg_wrap"> <div class="msg_body">  <div class="msg_push"></div> </div>' +
    '<div class="msg_footer"><textarea class="msg_input" rows="4"></textarea></div>     </div>  </div>';

  $("body").append(chatPopup);
  displayChatBox();
}