Home/ Questions/Q 8092633
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T20:19:37+00:00

I previously did some popups / dialogs that I’ve now got regression error in

  • 0

I previously did some popups / dialogs that I’ve now got regression error in () and want to recode to use JQuery for the DIVs / popups / dialogs. Moving to Jquery will be an advantage since we can enable repositioning and resize for dialogs / popups which we can’t if the popup is just a DIV which places itself over the other elements.

Now I wonder what is the “best” way to make popups / dialogs / DIV appear with JQuery? I’d rather not add a plugin and only include the basic JQuery file. can you tell me how to do it?

The current page makes something like a popup but it is not repositionable.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The way I would do this is create a .popup class that contains the basic layout features for the popup. Then add this class to a hidden <div> at the top of the page.

    Then when a popup is needed, attatch the draggable and resizable attributes of jQuery to it. After that, load the popup’s content with a .get() request from a page dedicated for popup content and then .show() it.

    Example

    CSS

    .popup 
{
    display:none;
    position:absolute;
    // some other nice styling features
}

    HTML

    <body>
<div class='popup'></div>
...
page content
...
</body>

    Javascript

    function popup(){
    // for the draggable you may want to specify the drag handle like only the title of the popup
    var popup = $('.popup');

    popup.draggable();
    popup.resizable();

    $.get('/getPopup.php?action=theKindOfPopupRequested', function(data) {        
        popup.html(data);
        popup.show('fast');
    });
}

    Sources:

    http://jqueryui.com/demos/resizable/

    http://jqueryui.com/demos/draggable/

    • 0