Versions Compared

Old Version 13

changes.mady.by.user Debanraj Ravindran

Saved on

compared with

New Version 14

changes.mady.by.user Debanraj Ravindran

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. To enable drag and resize functionality for pop-up windows.
  2. Navigate to UI > Settings > Advanced > Custom JavaScript add the following script to the UI settings as shown in the code block and screenshot below:
    Code Block
    languagejs
    $(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();
    });
});
  3. The drag icon allows us to reposition the pop-up by clicking and dragging it to our desired location, as demonstrated in the image below.                                                                                                                 

  4. To customize the pop-up’s appearance, edit the inline style attributes in line 9 applied to the .ui-dialog-drag-handle element, such as position, offset, or cursor style.                                                                                                             
    Image Modified

Code Block
languagejs
// To customize the popup appearance, modify the inline styles in the code below as needed
if ($dialog.find('.ui-dialog-drag-handle').length === 0) {
    // You can adjust the drag icon’s styling here
    $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>'
    );
}

...