unicornquestion unicornquestion - 1 year ago 76
CSS Question

HTML / CSS / JS (JQuery) - draggable modal rezises window width / height

I'm currently trying to create a modal, which is hidden on the application start up. Once I would click the button, the modal appears.

This is working so far using the following code:

Modal 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>


Modal show / dragable JS:

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


But once I drag the modal to the right or bottom side of the screen the whole layout would extend itself.

Live example (Storing auth credentials): http://pr0b.com:2000

Screenshot example: https://gyazo.com/0b55ab2f8f71ef7526d0fe2474883dde

Question:

How could I create the dragable function to not extend the layout?




In case the live preview will be inspected (Not responsive yet):


  1. Open the live preview link.

  2. Click login.

  3. Click the little "message bubble" icon on the right of the input.

  4. Drag the modal to the right or to the bottom of the site.


Answer Source

Your containing element is already set to take up the entire window, just set an overflow hidden on it.

#ui { overflow: hidden; }
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download