¿Cómo refactorizar el uso de window.open (…) a una ventana de dhtml modal no intrusiva?

Question

Tengo una función que lanza una ventana de javascript, como esta

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

Esta función se llama aproximadamente 52 veces desde diferentes lugares en mi aplicación web.

Quiero volver a factorizar este código para usar una ventana emergente modal DHTML. El cambio debe ser lo más discreto posible.

Para mantener esta solución a la par con la solución anterior, creo que también tendría que hacer lo siguiente

1. Proporcionar un identificador para " Cerrar " la ventana.
2. Asegúrese de que la ventana no se pueda mover y que esté ubicada en el centro de la pantalla.
3. Desenfoque el fondo como una opción.

Pensé que esta solución es la más cercana a lo que quiero, pero No pude entender cómo incorporarlo.

Edit: Un par de ustedes me han dado una buena pista. Gracias. Pero déjame replantear mi problema aquí. Estoy re-factorizando el código existente. Debería evitar cualquier cambio al presente HTML o CSS. Idealmente, me gustaría lograr este efecto manteniendo la firma de la función de genericPop (...) también.

Answer 1

Aquí está mi solución usando las bibliotecas jQuery y jQuery UI. Su API no se cambia , pero el parámetro 'nombre' se ignora . Uso iframe para cargar contenido de strLink dado y luego mostrar ese iframe como hijo para generar div , que luego se convierte en ventana emergente modal usando 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;
  });
});

Documentación para jQuery UI / Dialog .

Answer 2

Yo uso este código de diálogo para hacerlo bonito mucho lo mismo.

Si recuerdo correctamente, la implementación predeterminada no admite cambiar el tamaño del diálogo. Si no puedes hacer con un solo tamaño, puedes modificar el código o css para mostrar varios anchos.

el uso es fácil:

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

Modificación de los js para admitir varios anchos:

Agregue el ancho y el alto como atributos para mostrar la función de diálogo y configúrelos en los elementos de diálogo y contenido de diálogo en la línea 68

Answer 3

Pruebe Control.Window , que requiere Prototipo

Así es como lo uso:

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

Y en mi archivo Javascript:

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

Ahora, si desea cerrar la ventana emergente abierta actualmente, haga lo siguiente:

Control.Modal.current.close()