HTML/CSS/JS（jQuery） - 可拖動模式rezises窗口寬度/高度

Question

我目前正在嘗試創建一個模式，它隱藏在應用程序啓動時。一旦我點擊按鈕，模態就會出現。

這是工作迄今使用下面的代碼：

HTML模式：

<div style="width:500px; display:none;" id="chatModal" class="panel panel-default chatModal"> 
    <div class="panel-heading"> 
     <h6 class="panel-title">Zworld Chat</h6> 
     <div class="heading-elements"> 
      <ul class="icons-list"> 
       <li><a data-action="collapse"></a></li> 
       <li><a data-action="reload"></a></li> 
      </ul> 
     </div> 
    </div> 

    <div style="overflow-y: scroll; height: 200px;" class="panel-body" id="chat-text"> 
     <div>Chat messages:</div> 
    </div> 
</div> 

莫代爾顯示/ dragable JS：

$('#chatBox').click(function() 
{ 
    if ($('#chatModal').css('display') == 'none'){ 
     $('#chatModal').show(); 
     $('#chatModal').draggable(); 
    } 
    else 
    { 
     $('#chatModal').hide(); 
    } 
}); 

但是，一旦我拖模式到屏幕的右側或底部時，整個佈局會自行擴展。

活生生的例子（存儲AUTH憑證）：http://pr0b.com:2000

截圖例如：https://gyazo.com/0b55ab2f8f71ef7526d0fe2474883dde

問：

我怎麼能創造dragable功能不延伸佈局？

---

萬一實時預覽將被檢查（不響應尚）：

1. 打開實時預覽鏈接。
2. 點擊登錄。
3. 單擊輸入右側的小「消息氣泡」圖標。
4. 將模式拖到網站的右側或底部。

Answer 1

您的包含元素已被設置爲佔據整個窗口，只需設置隱藏在其上的溢出。

#ui { overflow: hidden; } 

Answer 2

您可以使用遏制，以保持它的父窗口內

$("#chatModal").draggable({ containment: "window" });