javascript - HTML/CSS/JS (JQuery) - 可拖动模式重新调整窗口宽度/高度

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>

模态显示/可拖动JS:

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

但是一旦我将模式拖到屏幕的右侧或底部，整个布局就会自行扩展。

实例(存储身份验证凭据):http://pr0b.com:2000

截图示例:https://gyazo.com/0b55ab2f8f71ef7526d0fe2474883dde

问题:

如何创建不扩展布局的可拖动功能？

---

如果实时预览将被检查(尚未响应):

1. 打开实时预览链接。
2. 点击登录。
3. 点击输入右侧的小“消息气泡”图标。
4. 将模式拖到网站的右侧或底部。

Answer 1

您的包含元素已经设置为占据整个窗口，只需设置一个隐藏在其上的溢出即可。

#ui { overflow: hidden; }