8

Bom dia, estou tentando abrir uma modal no google Chrome... A aplicação atual já usa a anos o window.showModalDialog, ela funciona no IE... não posso fazer as alterações usando a tag dialog do html 5, existe algum outro método ou uma função jquey/javascript que realiza o mesmo e que funcione google Chrome?
OBS: O método window.open não atende a necessidade!!

function CredencialEletronica(operacao, paramsInt, paramsDecimal, paramsString, paramsDate, paramsBool)
{
    var params = {'CodigoOperacao' : operacao 
        , 'paramsInt' : paramsInt 
        , 'paramsDecimal' : paramsDecimal 
        , 'paramsString' : paramsString 
        , 'paramsDate' : paramsDate 
        , 'paramsBool' : paramsBool
        , 'date:' : new Date()};

        var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
        var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;

        width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
        height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;

        var left = ((width / 2) - (440 / 2)) + dualScreenLeft;
        var top = ((height / 2) - (220 / 2)) + dualScreenTop;

        var result = window.showModalDialog('nomTela.aspx?' + $.param(params), '', 'Imagens;dialogHeight: 220px; dialogWidth: 440px;resizable: No; status: No;center: Yes; help: No');

        if (result == 'Ok') { return true; } 
        else { return false; }
}
3
  • Olá, eu respondi essa mesma pergunta em outro post aqui. Possível duplicata da 249447
    – avsinacio
    13/11/2017 às 13:58
  • Olá, como falei ali a tag dialog não me atende 13/11/2017 às 14:00
  • Li a sua resposta antes de publicar, ficou muito boa, porem não me atende :/ 13/11/2017 às 14:00

3 Respostas 3

1

A função window.showModalDialog se tornou absoleta não só no Chrome (v.43) como também no Firefox (v.56). Inclusive, lendo a especificação da função, provavelmente se tornará obsoleta em mais browsers.

Ainda consultando a MDN, a solução proposta para a substituição dessa função é utilizar a tag HTML5 <dialog>. Vou colocar um exemplo abaixo, que foi retirado da MDN e você pode verificar se atende sua necessidade:

(function() {
  var botaoUpdate = document.getElementById('atualizarDetalhes');
  var botaoCancelar = document.getElementById('cancelar');
  var favDialog = document.getElementById('favDialog');

  // Abre a modal de diálogo
  botaoUpdate.addEventListener('click', function() {
    favDialog.showModal();
  });

  // Botão de cancelar fecha a modal de diálogo
  botaoCancelar.addEventListener('click', function() {
    favDialog.close();
  });
})();
<dialog open id="favDialog">
  <form method="dialog">
    <section>
      <p><label for="favAnimal">Animal favorito:</label>
      <select id="favAnimal">
        <option></option>
        <option>Panda</option>
        <option>Leão</option>
        <option>Cachorro</option>
      </select></p>
    </section>
    <menu>
      <button id="cancelar" type="reset">Cancelar</button>
      <button type="submit">Confirmar</button>
    </menu>
  </form>
</dialog>

<menu>
  <button id="atualizarDetalhes">Atualizar detalhes</button>
</menu>

EDIT: Não tinha lido os comentários na sua pergunta e vi que a tag <dialog> não atende sua necessidade. Irei deixar a resposta pois é uma das alternativas cabíveis, caso alguém tenha o mesmo problema futuramente.

No seu caso, sugiro a criação de uma modal utilizando Bootstrap/JQuery, carregando o conteúdo do seu antigo "dialog" dentro dela, e depois, fazendo a lógica necessária:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#minhaModal">Abrir   Modal</button>
  
  <div class="modal fade" id="minhaModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Cabeçalho</h4>
        </div>
        <div class="modal-body">
          <p>Carregar conteúdo da caixa de diálogo aqui.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
        </div>
      </div>
    </div>
  </div>
</div>

1

Parece que o chrome desabilitou essa funçao.. tens nesse post as explicaçoes e algumas ideias para contornar a situacao

https://stackoverflow.com/questions/25663053/how-can-i-make-window-showmodaldialog-work-in-chrome-37

edit: diria entao para usares outra library, pode ser mesmo o dialog do jquery por exemplo, mas como esta tens muitas.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#dialog" ).dialog();
  } );
  </script>
</head>
<body>

<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>


</body>
</html>

https://jqueryui.com/dialog/

4
  • Nenhuma resposta foi marcada como solução... testei algumas e nenhuma atendeu o problema. 13/11/2017 às 18:21
  • e para eu realizar a chamada de outra page? ao invés de uma div da mesma page... 16/11/2017 às 16:22
  • oi gabriel: voce chegou a tentar inclusive usando BootStrap/JQuery como o colega sugeriu em uma das respostas? 21/11/2017 às 1:57
  • para usar assim, tenho que mudar a estrutura da pagina, ela esta em asp net, terei que mudar todas as funções de classe para poder realizar desta forma 25/11/2017 às 11:18
1

A função parece ter sido descontinuada, e seu problema é bem comum de acontecer em aplicações legadas.

O que é possível fazer é verificar a existência da função, e caso ela não exista, crie uma que produza um resultado semelhante ao que precisa.

 if (typeof window.showModalDialog === "function") { 
      window.showModalDialog = function (url, params) {
           // Implementação que faça uma chamada Ajax e adicione 
           // o resultado em algum elemento na página.
      }
 }

Como provavelmente não terá nenhum elemento nas páginas para receber o conteúdo da chamada Ajax, recomendo adicionar o elemento toda vez que a função for chamada, e removida toda vez que o modal for fechado.

As implementações deste modal são várias, assim como já foi exemplificado em outras respostas, ou mesmo poderá usar alguma biblioteca pronta de modal.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .