Introduction
In this article demonstrates how to enhance Joget Userview popups by making them draggable and resizable. By injecting a simple script into the UI settings, users can interact with popups more freely, improving overall usability. Additionally, the appearance and behavior of these popups can be customized through CSS modifications.
How does it work?
- To enable drag and resize functionality for pop-up windows, add
...
- the following script to the UI settings as shown in the
...
- screenshot.
UI→ Settings→ Advanced→ Custom Javascript
| Code Block | ||
|---|---|---|
| ||
$(document).ready(function() {
function enhanceDialog() {
var $dialog = $('.ui-dialog');
if ($dialog.length > 0) {
if ($dialog.find('.ui-dialog-drag-handle').length === 0) {
//modify the drag icon according to your needs
$dialog.find('.ui-dialog-titlebar').prepend('<span class="ui-dialog-drag-handle ui-icon ui-icon-grip-dotted-vertical" style="position: absolute; right: 20px; top: -10px;cursor: move;"></span>');
}
$dialog.draggable({
handle: '.ui-dialog-drag-handle',
containment: 'window'
}).resizable({
handles: 'all',
minWidth: 400,
minHeight: 300,
resize: function(event, ui) {
var $iframe = $('#jqueryDialogFrame');
if ($iframe.length > 0) {
$iframe.height(ui.size.height - $('.ui-dialog-titlebar').outerHeight());
}
}
});
// Update handles according to your needs
$('<style>')
.text(`
.ui-dialog .ui-dialog-drag-handle {
display: inline-block;
width: 16px;
height: 16px;
margin-top: 2px;
}
.ui-dialog .ui-resizable-handle {
background: #f0f0f0;
border: 1px solid #ccc;
}
.ui-dialog .ui-resizable-se {
width: 12px;
height: 12px;
right: -5px;
bottom: -5px;
}
.ui-dialog .ui-resizable-e {
width: 8px;
right: -4px;
}
.ui-dialog .ui-resizable-s {
height: 8px;
bottom: -4px;
}
`)
.appendTo('head');
}
}
enhanceDialog();
$(document).on('dialogopen', '.ui-dialog', function() {
enhanceDialog();
});
}); |