Ciao a tutti della sezione, sto seguendo un progetto di lavoro su cui non posso dire più di tanto ma vi dico che è una applicazione web Java che usa lato client anche molto Javascript.
Per visualizzare nel browser una finestra di "message box" il progetto usa la ben nota funzione window.showModalDialog().
Sfortunatamente nel progetto non viene usata alcuna libreria JavaScript "moderna" (es. JQuery) e il codice Javascript usa le classiche "perle" che vanno solo su IE (es. document.all e altre cose). Vogliono che la dialog funzioni anche con Firefox (oltre che con IE 6+) ... ora ovviamente non funge correttamente.

La dialog che si vorrebbe ottenere è una cosa come la seguente:


(non guardate i colori ... ora mi servono solo per vedere la posizione/allineamento delle aree).

La finestra dovrebbe presentarsi come una classica "message box": una icona a lato (sta centrata verticalmente), un testo che può essere anche lungo (in quel caso può comparire la scrollbar verticale) e un'area per dei pulsanti che deve stare sempre in basso.

Io al momento ho preso più o meno la struttura HTML di quella pagina del progetto e l'ho messa in un sorgentino di prova a parte inserendo codice JavaScript nuovo che usa JQuery.

Il codice è il seguente:

main.html (chiamatelo come volete, è solo per permettere la apertura della dialog).
codice:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Test dialog messaggio</title>
<script type="text/javascript">
function open() {
    var result = window.showModalDialog("messagebox.html", null, "dialogWidth:390px;dialogHeight:180px;resizable:yes;scrollbars:no;status:no");
}
</script>
</head>
<body>
Apri dialog
</body>
</html>
messagebox.html
codice:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Messaggio</title>
<style type="text/css">
<!--
body {
  margin: 0px;
  padding: 0px;
}

#imgArea { position: absolute; }

#imgArea img {
  display: block;
}

#msgArea {
  text-align: center;
  overflow: auto;
  background: yellow;
}

#buttonArea {
  text-align: center;
  background: orange;
}
-->
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">

$(function() {
    $(window).load(doResize);
    $(window).resize(doResize);
});

function doResize() {
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();

    var imgAreaTopMargin = 5;
    var imgAreaLeft = 5;
    var imgAreaWidth = 32;
    var imgAreaHeight = 32;

    var msgAreaTop = 5;
    var msgAreaLeft = 45;
    var msgAreaRight = 5;
    var msgAreaBottom = 5;

    var buttonAreaLeft = 5;
    var buttonAreaRight = 5;
    var buttonAreaBottom = 5;
    var buttonAreaHeight = 40;

    var imgAreaTop = imgAreaTopMargin + (viewportHeight - imgAreaTopMargin -
            imgAreaHeight - msgAreaBottom - buttonAreaHeight - buttonAreaBottom) / 2;

    if (imgAreaTop < imgAreaTopMargin) {
        imgAreaTop = imgAreaTopMargin;
    }

    var msgAreaWidth = viewportWidth - msgAreaLeft - msgAreaRight;
    var msgAreaHeight = viewportHeight - msgAreaTop - msgAreaBottom - buttonAreaHeight - buttonAreaBottom;

    var buttonAreaTop = viewportHeight - buttonAreaHeight - buttonAreaBottom;
    var buttonAreaWidth = viewportWidth - buttonAreaLeft - buttonAreaRight;

    var imgArea = $("#imgArea").offset({ top: imgAreaTop, left: imgAreaLeft })
        .width(imgAreaWidth).height(imgAreaHeight);

    var msgArea = $("#msgArea").offset({ top: msgAreaTop, left: msgAreaLeft })
        .width(msgAreaWidth).height(msgAreaHeight);

    var buttonArea = $("#buttonArea").offset({ top: buttonAreaTop, left: buttonAreaLeft })
        .width(buttonAreaWidth).height(buttonAreaHeight);
}

</script>
</head>
<body>

<div id="imgArea">
  
</div>

<div id="msgArea">
  <table valign="center" align="center" border="0" width="100%">
    <tr>
      <td align="center"><div id="messageFont">
Questo è un testo che può essere composto da tante righe.

Questo è un testo che può essere composto da tante righe.

Questo è un testo che può essere composto da tante righe.

Questo è un testo che può essere composto da tante righe.

Questo è un testo che può essere composto da tante righe.

Questo è un testo che può essere composto da tante righe.

Questo è un testo che può essere composto da tante righe.

Questo è un testo che può essere composto da tante righe.

Questo è un testo che può essere composto da tante righe.

Questo è un testo che può essere composto da tante righe.

Questo è un testo che può essere composto da tante righe.

Questo è un testo che può essere composto da tante righe.

Questo è un testo che può essere composto da tante righe.

Questo è un testo che può essere composto da tante righe.

Questo è un testo che può essere composto da tante righe.

Questo è un testo che può essere composto da tante righe.

Questo è un testo che può essere composto da tante righe.

Questo è un testo che può essere composto da tante righe.

Questo è un testo che può essere composto da tante righe.

      </div></td>
    </tr>
  </table>
</div>

<div id="buttonArea">
  Questa sezione conterrà dei pulsanti
</div>

</body>
</html>
Se volete testare il codice non c'è bisogno di altro: JQuery l'ho linkato sulla CDN di Google e la immagine della icona è online. Il problema è che ho notato una discrepanza su come si presenta all'inizio la dialog sia con IE che con Firefox.


Appena aperta la dialog su IE 8 appare così:



Appena aperta la dialog su Firefox 8 appare così:



Con IE la finestra sembra vuota. In realtà c'è la scrollbar verticale della finestra e il contenuto è "sotto" non visibile. Con Firefox invece c'è uno spazio a destra della scrollbar che non ci dovrebbe essere.

Appena si ridimensiona (anche di poco) la finestra, tutto va a posto, sia con IE che con Firefox, come nella prima immagine che ho mostrato.

Quale è il problema? Ho omesso qualcosa? Non ho fatto le cose nel modo giusto? O data la mia non elevatissima competenza su JQuery c'è qualcosa che non so?
Non so se poi applicherò al progetto questa tecnica ma ad ogni modo sarei curioso di sapere come si potrebbe sistemare.

Se c'è qualcuno che può darmi qualche indicazione, ringrazio in anticipo. Non ho bisogno che qualcuno mi scriva del codice! Basta avere qualche indicazione utile affinché possa modificare il codice. Grazie!