How to refactor from using window.open(…) to an unobtrusive modal dhtml window?

Question

I have a function which launches a javascript window, like this

    function genericPop(strLink, strName, iWidth, iHeight) {
            var parameterList = "location=0,directories=0,status=0,menubar=0,resizable=no, scrollbars=no,toolbar=0,maximize=0,width=" + iWidth + ", height=" + iHeight;
            var new_window="";

            new_window = open(strLink, strName, parameterList);
            window.self.name = "main";
            new_window.moveTo(((screen.availWidth/2)-(iWidth/2)),((screen.availHeight/2)-(iHeight/2)));
            new_window.focus();
}

This function is called about 52 times from different places in my web application.

I want to re-factor this code to use a DHTML modal pop-up window. The change should be as unobtrusive as possible.

To keep this solution at par with the old solution, I think would also need to do the following

1. Provide a handle to "Close" the window.
2. Ensure the window cannot be moved, and is positioned at the center of the screen.
3. Blur the background as an option.

I thought this solution is the closest to what I want, but I could not understand how to incorporate it.

Edit: A couple of you have given me a good lead. Thank you. But let me re-state my problem here. I am re-factoring existing code. I should avoid any change to the present HTML or CSS. Ideally I would like to achieve this effect by keeping the function signature of the genericPop(...) same as well.

Answer 1

Here is my solution using jQuery and jQuery UI libraries. Your API is not changed , but parameter 'name' is ignored. I use iframe to load content from given strLink and then display that iframe as a child to generated div, which is then converted to modal pop-up using jQuery:

function genericPop(strLink, strName, iWidth, iHeight) {
  var dialog = $('#dialog');
  if (dialog.length > 0) {
    dialog.parents('div.ui-dialog').eq(0).remove();
  }

  dialog = $(document.createElement('div'))
    .attr('id', 'dialog')
    .css('display', 'none')
    .appendTo('body');

  $(document.createElement('iframe'))
    .attr('src', strLink)
    .css('width', '100%')
    .css('height', '100%')
    .appendTo(dialog);

  dialog.dialog({ 
      draggable: false,
      modal: true, 
      width: iWidth,
      height: iHeight,
      title: strName,
      overlay: { 
          opacity: 0.5, 
          background: "black" 
      } 
  });
  dialog.css('display', 'block');
}

// example of use
$(document).ready(function() {
  $('#google').click(function() {
    genericPop('http://www.google.com/', 'Google', 640, 480);
    return false;
  });
  $('#yahoo').click(function() {
    genericPop('http://www.yahoo.com/', 'Yahoo', 640, 480);
    return false;
  });
});

Documentation for jQuery UI/Dialog.

Answer 2

I use this dialog code to do pretty much the same thing.

If i remember correctly the default implementation does not support resizing the dialog. If you cant make with just one size you can modify the code or css to display multiple widths.

usage is easy:

showDialog('title','content (can be html if encoded)','dialog_style/*4 predefined styles to choose from*/');

Modifying the js to support multiple widths:

Add width and height as attributes to show dialog function and the set them to the dialog and dialog-content elements on line 68

Answer 3

Try Control.Window, which requires Prototype

Here's how I use it:

<a href="/messages/new" class="popup_window">New Message</a>

And in my Javascript file:

$(document).observe("dom:loaded", function() {
  $$("a.popup_window").each(function(element) {
    new Control.Modal(element, { overlayOpacity: 0.75, 
                                 className: 'modal',
                                 method: 'get',
                                 position: 'center' });
  });
});

Now if you want to close the currently open popup do:

Control.Modal.current.close()