Como refatorar usem window.open (...) para uma discreta janela DHTML modal?

Question

Eu tenho uma função que inicia uma janela de javascript, como este

    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 função é chamada cerca de 52 vezes de diferentes lugares em minha aplicação web.

Eu quero re-fator este código para usar um DHTML modal janela pop-up. A mudança deve ser o mais discreto possível.

Para manter esta solução a par com a solução de idade, eu acho que também precisa fazer o seguinte

1. Fornecer um identificador para "Close" da janela.
2. Verifique se a janela não pode ser movido, e está posicionado no centro da tela.
3. Blur fundo como uma opção.

esta solução é o mais próximo do que eu quero, mas eu não conseguia entender como incorporá-lo.

Edit: Um par de você ter me dado uma boa vantagem. Obrigado. Mas deixe-me re-afirmar o meu problema aqui. Estou re-factoring código existente. I deve evitar qualquer alteração ao presente HTML ou CSS. Idealmente, eu gostaria de conseguir este efeito, mantendo a assinatura função do genericPop (...) mesmo assim.

Answer 1

Aqui está a minha solução usando bibliotecas jQuery e jQuery UI. Sua API não é alterado , mas parâmetro 'nome' é ignorado . Eu uso iframe para o conteúdo de carga de dados strLink e, em seguida, exibir que iframe como uma criança a div gerado, que é então convertido em modal jQuery pop-up usando:

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

Documentação para jQuery UI / Dialog .

Answer 2

Eu uso este de diálogo do código fazer muito a mesma coisa.

Se bem me lembro a implementação padrão não suporta redimensionamento de diálogo. Se você não pode fazer com apenas um tamanho que você pode modificar o código ou css para exibir várias larguras.

uso é fácil:

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

Modificando os js para suportar várias larguras:

Adicionar largura e altura como atributos para mostrar a função de diálogo e configurá-los para os elementos de diálogo e de diálogo em conteúdo na linha 68

Answer 3

Tente Control.Window , o que requer Prototype

Aqui está como eu usá-lo:

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

E no meu arquivo 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' });
  });
});

Agora, se você quiser fechar o pop-up aberta no momento fazer:

Control.Modal.current.close()