window.showModalDialog does not work in Google Chrome, is there something equivalent?

Question

window.showModalDialog does not work in Google Chrome, is there something equivalent?

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (1 votes)

8

Hello, I'm trying to open a modal in google Chrome ... The current application already uses window.showModalDialog for years, it works in IE ... I can not make changes using the html 5 dialog tag, there is some other method or a jquey / javascript function that performs the same and works google Chrome?
NOTE: The window.open method does not meet the need !!

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

javascript jquery google-chrome modal dialog

asked by anonymous 13.11.2017 / 14:40

3 answers

1

It seems that chrome disabled this function .. you have in this post the explanations and some ideas to get around the situation

link

edit: I would say then to use another library, it may even be the jquery dialog for example, but like this you have many.

<!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><scriptsrc="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>

link

13.11.2017 / 14:48

1

The function seems to have been discontinued, and its problem is very common to happen in legacy applications.

What you can do is check the existence of the function, and if it does not exist, create one that produces a result similar to what you need.

 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.
      }
 }

As you probably will not have any elements on the pages to receive the contents of the Ajax call, I recommend adding the element every time the function is called, and removed every time the modal is closed.

The implementations of this modal are several, as has already been exemplified in other answers, or may even use some ready modal library.

23.11.2017 / 02:16

What is the best type in SQL to use with CryptoCurrency? What is the difference between Class and Code File in ASP.NET Core?

score 1 · Accepted Answer

The window.showModalDialog function has become obsolete not only in Chrome (v.43) but also in Firefox (v.56). Even reading the specification of the function will probably become obsolete in more browsers.

Referring to MDN , the proposed solution to replace this function is to use the HTML5 <dialog> tag. I'll put an example below, which was taken from MDN and you can check if it meets your need:

(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: I had not read the comments in your question and saw that the <dialog> tag does not meet your need. I will leave the answer because it is one of the alternatives if someone has the same problem in the future.

In your case, I suggest creating a modal using Bootstrap / JQuery, loading the contents of your old "dialog" into it, and then doing the necessary logic:

<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><scriptsrc="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>