Como refatorar usem window.open (...) para uma discreta janela DHTML modal?
-
04-07-2019 - |
Pergunta
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
- Fornecer um identificador para "Close" da janela.
- Verifique se a janela não pode ser movido, e está posicionado no centro da tela.
- 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.
Solução
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;
});
});
Outras dicas
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
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()