Question

我创建了这个jsbin：http://jsbin.com/qoriqihapara/1/edit

你可以看到我有两个问题，我不知道如何解决

如果您打开第一个聊天窗口然后第二个关闭第一个，然后再打开第一个，您会看到两个聊天窗口重叠，因为right的计算并不完美

当关闭不是第一个或最后一个的聊天窗口时（考虑打开多个聊天窗口），是否有任何方法希望可以将所有聊天窗口移到右边???

< / LI>

代码：

var right = 10;
var rightPadding = 10;
function CreateDiv(id)
{
 var ToAppend = "<div class='Msg_container_dv' id='Msg_container_dv_" + id + "' style='right:" + right + "px' >"
                       + "<div class='Chat_Header_dv'>"
                       + "<table><tr>"
                       + "<td><a href='javascript:void(0)' onclick='closeChatwnd(\"Msg_container_dv_" + id + "\")' >close window</a></td>"
                       + "</tr></table>"
                       + "</div>"
                       + "<div class='Chat_Body_Container' id='Chat_Body_Container_" + id + "'>" + id + "...</div>"
                       + "<div class='Chat_Footer_Container'>text here...</div>"
                       + "</div>";
right = right + (280 + rightPadding); // 280 is the width of the chat window
$("#chat_div_container").append(ToAppend);

}
function closeChatwnd(id)
{
 $("#" + id).remove();
 right = right - (280 + rightPadding);
}

Answer 1

我建议这样做：

#chat_div_container
{
  padding-right:15px;
  position:fixed;
  bottom:0px;
  right:0px;
  width:200%; /*or more*/
}

和Msg_container_dv

.Msg_container_dv
{
  height:280px;
  width:280px;
  border:1px solid #868686;
  bottom:0px;
  float:right;
}

简单易行。

请勿忘记从style='right:" + right + "px'

中删除Msg_container_dv

当子div被销毁时，将父div中的所有子div移位

1 个答案: