You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Next »

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?

  1. 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

$(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();
    });
});


  • No labels