Diálogos modales en JavaScript

Muestra un cuadro de diálogo modal con los parámetros especificados:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116

//------------------------------------------------------------------------------------------------ // Engines      JavaScript   1.4+ //              JScript      5.5+ // Environments NN6+ IE5.5+ MOZILLA1+ SAFARI1+ //------------------------------------------------------------------------------------------------ function getModalDlg (        s // url      , c // callback      , w // width      , h // height      , x // left      , y // top ){      if (s == null || (s += '').length < 1 || !/^((ht|f)tp(s)*\:\/\/)*\S+$/.test(s))          throw new Error('getModalDlg: Invalid Url! "' + s + '"');        if (typeof c != 'function')          throw new Error('getModalDlg: Invalid callback function!');        var a = Array.prototype.slice.call(arguments, 2);      var b = a.length < 3;      var f = ['width', 'height', 'left', 'top'];         w = window;        var p = w.showModalDialog;      var d = p ? [':', 'px;'] : ['=', ','];      var u = 'undefined';      var m = typeof netscape != u;      var n = navigator.userAgent;        for (var i = 0; i < a.length; ++i)          a[i] = (p ? 'dialog' : '') + f[i] + d[0] + a[i] + d[1];        f = a.join('');        if (p)      {          f += 'center:' + (b ? '1' : '0') + ';scroll:1;';          f += n.indexOf('MSIE') + 1 ? 'status:0' : 'resizable:0';          s  = p(s, null, f);                     c(typeof s.returnValue != u ? s.returnValue : s);      }        else      {          w.dlgcallback = c;          f += 'dialog,scrollbars,chrome,modal=yes,location=0,status=0,toolbar=no';            if (b)              f += ',centerscreen';            if (m && (m = netscape.security.PrivilegeManager))          {              try              {                  m.enablePrivilege(d = 'UniversalBrowserWrite');                  w.open(s, '_blank', f);                  m.disablePrivilege(d);                    return;              }                catch (e) {}          }            if (typeof w.__dlg == u || w.__dlg.closed)          {              w.__dlg  = w.open(s, '_blank', f);                try              {                  w.onfocus = function ()                  {                      if (typeof this.__dlg != u && !this.__dlg.closed)                      {                          this.blur();                          this.__dlg.focus();                      }                        else delete this.onfocus;                  }                     w.__dlg.onblur = function ()                  {                      this.opener.blur();                      this.focus();                  }              }                catch (e)              {                  c    = { callback: c, dialog: w.__dlg};                  c.id = setInterval                  (                        function (o)                        {                            var s = 'returnValue';                            if (typeof o.dialog[s] != 'undefined')                            {                                o.callback(o.dialog[s]);                                clearInterval(o.id);                            }                       }                     , 0                     , c                 );              }          }            else if (typeof w.__dlg != u)              w.__dlg.focus();      } }

Uso:

1	getModalDlg('my-url', function (returnValue) { /* TODO... */ }, 320, 240);

Código a insertar en la página del cuadro de diálogo:

1 2 3 4 5 6 7 8 9 10

function setDlgReturnValue (v /* value */) {      var s = 'returnValue';      var w = window;        if (w.showModalDialog || !w.opener || !w.opener.dlgcallback)          w[s] = v;        else w.opener.dlgcallback(v); }

Uso:

1 2	setDlgReturnValue('my-value'); window.close();