window.showModalDialog does not work on Google Chrome, is there anything equivalent?

Asked

Viewed 923 times

8

Good morning, I’m trying to open a modal on google Chrome... The current application already uses window.showModalDialog for years, it works in IE... I can not make the changes using the html 5 dialog tag, there is some other method or a jquey/javascript function that performs the same and that 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

  • Hello, I answered that same question in another post here. Possible duplicate of 249447

  • Hello, as I said there the tag dialog does not suit me

  • I read your reply before publishing, it was very good, but does not answer me :/

3 answers

1

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

What you can do is check the existence of the function, and if it doesn’t 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.
      }
 }

Since you probably won’t have any elements on the pages to receive the content of the Ajax call, I recommend adding the element every time the function is called, and removing it every time the modal is closed.

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

1

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

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

Edit: I would say to use another library, it may be the jquery dialog for example, but since this one has 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>
  <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/

  • No response was flagged as a solution... I tested some and no one answered the problem.

  • and for me to call another page? instead of a div from the same page...

  • hi Gabriel: Voce even tried using Bootstrap/Jquery as the colleague suggested in one of the answers?

  • to use so, I have to change the structure of the page, it is in Asp net, I will have to change all class functions to be able to perform this way

1


The function window.showModalDialog became absoleta not only in Chrome (v.43) but also in Firefox (v.56). Inclusive, reading the specification function, will probably become obsolete in more browsers.

Still consulting to MDN, the solution proposed for replacing this function is to use the HTML5 tag <dialog>. 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 hadn’t read the comments on your question and saw that tag <dialog> does not meet your need. I will leave the answer because it is one of the appropriate 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 making 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>
<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>

Browser other questions tagged javascript jquery google-chrome modal dialog

You are not signed in. Login or sign up in order to post.