Versions Compared

Old Version 4

changes.mady.by.user Selvavignesh Perumal

Saved on

compared with

New Version 5

changes.mady.by.user Selvavignesh Perumal

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, add the following script to the UI settings as shown in the screenshot.
    UI→ Settings→ Advanced→ Custom Javascript
    Image Modified
    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();
    });
});
  2. The drag icon allows you to reposition the pop-up by clicking and dragging it to your desired location. Refer to the attached screenshot.                                             Image Added

  3. To customize the popup’s appearance, you can modify the styles as needed. Refer to the attached screenshot for guidance.                                                                                                                    Image Added


Download Sample App

View file
nameAPP_Popup_Drag&Resize-1.jwa
height250