I'm currently working on implementing a hidden modal in my application that only appears when a specific button is clicked.
Here is the code that I have used to achieve this functionality:
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 / draggable JS:
$('#chatBox').click(function()
{
if ($('#chatModal').css('display') == 'none'){
$('#chatModal').show();
$('#chatModal').draggable();
}
else
{
$('#chatModal').hide();
}
});
However, I have encountered an issue where dragging the modal to the right or bottom side of the screen causes the layout to extend itself.
For a live example (Note: authentication credentials are stored):
Here is a screenshot example: https://gyazo.com/0b55ab2f8f71ef7526d0fe2474883dde
Question:
Is there a way to make the draggable function not extend the layout when the modal is dragged?
If you'd like to see the live preview (Note: not responsive yet), follow these steps:
- Open the live preview link.
- Click on the login button.
- Click on the small "message bubble" icon located on the right side of the input.
- Try dragging the modal to the right or bottom of the site.