我正在管理一个充斥着弹出窗口的旧网站。他们非常烦人，因为他们不断迷失在主窗口后面。我正在慢慢将它们移动到一个现代的“灯箱”，但这是一个缓慢而乏味的过程，因为所有这些弹出窗口都包含表单，验证是在服务器端完成的，这意味着我需要能够提交表单然后如果在没有破坏整个页面的情况下出现错误，请重新渲染它。
我刚刚发现有一个window.showDialogBox可以在Firefox中完美运行（阻止您在关闭对话框之前单击主页面），但Chrome已经弃用它，IE只支持它一半。
那么，有没有什么可以同时替换window.open以提供更好的用户体验，而无需重写每个表单以通过XHR发送和接收JSON？
答案 0 :(得分：6)
您可以使用全新的模态<dialog>元素来使用我的showModalDialog polyfill，该元素适用于最新的Google Chrome。旧版浏览器的<dialog>填充为here。
答案 1 :(得分：1)
您可以为不同的浏览器使用不同的代码，例如：
if(navigator.userAgent.indexOf("MSIE") != -1){ //If the browser is IE
//Code for IE
}
else if(navigator.vendor == "Firefox"){ //If the browser is Firefox
//Code for Firefox
}
else if(navigator.vendor == "Google Inc."){ //If the browser is Chrome
//Code for Chrome
}
对于IE，showModalDialog工作正常，它会阻止您在关闭对话框之前单击主页面。
对于Firefox，您可以使用showDialogBox
对于Chrome，你可以使用niutech建议的东西。
否则，如果您使用window.open，则所有弹出窗口都将位于任务栏中，因此如果它们隐藏在窗口后面，只需在任务栏中单击它们即可使它们可见。
答案 2 :(得分：1)
这是我的代码：
/**
* May 2015: showModalDialog will not be supported any longer, so, if not available, we need to make a pure
* window.open and a catch which callbacks.
*
* In contradiction to other solutions, this "emulator" is capable of loading
* cross-origin urls such as oAuth2 redirect cascades, which can not be put in to iframes or dialogs due to
* their CSSP settings!
*
* Flow control of the caller needs to take care whether a window is returned or false
*
* @constructor showModalDialogHandler(callback) - callback is called, if window is closed.
*
*/
var showModalDialogHandler = function(callback)
{
this.modalDialogEmulator = null;
this.callBack = callback;
this.returnImmediately = false;
this.modalDialog = false;
this.maxRuns = 180;
this.intervall = 750;
this.force = false; // if set to true, emulate always.
this.chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
/**
* make the call, open a dialog, load etc.
*
* @param url - URL to load
* @param arg - args to pass to the window
* @param feature - featurelist as of window.open
* @return - erturns a window object (if modal dialogs are supported) or false otherwise
*
*/
this.callModalDialog = function(url, arg, feature) {
var self = this;
if ( !this.force && window.showModalDialog )
this.modalDialog = window.showModalDialog(url, arg, feature );
else
{
this.modalDialog = this.modalDialogEmulator(url, arg, feature );
window.setTimeout(function () {
self.modalDialog.focus();
}, 20);
/*
* Catch lose focus on main window. Modal dialog should at least
* stay in front of the opener. If the opener gets focus,
* window is either shuffled up or closed and reopend (chrome).
*
*/
jQuery(window).bind("focus", function() {
//console.log("opener focus");
if ( self.chrome )
{
// brute force: close and reopen, hope it will cope with that !!!
if( !self.modalDialog.closed )
{
self.modalDialog.close();
self.modalDialog = self.modalDialogEmulator(url, arg, feature );
}
}
else
{
if( !self.modalDialog.closed )
{
window.setTimeout(function () {
self.modalDialog.blur();
self.modalDialog.focus();
}, 30);
}
else
{
jQuery(window).unbind("focus"); // remove that listener, cpu-sucker.
}
}
});
}
if ( this.returnImmediately )
{
var runs = this.maxRuns;
var loop = setInterval(function() {
if(self.modalDialog.closed)
{
//console.log("close catched, callback:");
clearInterval(loop);
self.callBack();
}
if ( runs-- <= 0 )
clearInterval(loop); // infinitystopper
}, this.intervall );
return false;
}
else
return this.modalDialog;
};
/*
* showModalDialog is not longer supported, emulate with popup and
* a catcher with returnImmediately
*/
if ( this.force || !window.showModalDialog)
{
var self = this;
this.modalDialogEmulator = function(url, arg, feature) {
// console.log("window.ShowModalDialog not supported");
self.returnImmediately = true;
var opFeature = feature.split(";");
var featuresArray = new Array()
if (document.all)
{
for (var i = 0; i < opFeature.length - 1; i++)
{
var f = opFeature[i].split("=");
featuresArray[f[0]] = f[1];
}
}
else
{
for (var i = 0; i < opFeature.length - 1; i++)
{
var f = opFeature[i].split(":");
featuresArray[f[0].toString().trim().toLowerCase()] = f[1].toString().trim();
}
}
var h = "200px", w = "400px", l = "100px", t = "100px", r = "yes", c = "yes", s = "no";
if (featuresArray["dialogheight"]) h = featuresArray["dialogheight"];
if (featuresArray["dialogwidth"]) w = featuresArray["dialogwidth"];
if (featuresArray["dialogleft"]) l = featuresArray["dialogleft"];
if (featuresArray["dialogtop"]) t = featuresArray["dialogtop"];
if (featuresArray["resizable"]) r = featuresArray["resizable"];
if (featuresArray["center"]) c = featuresArray["center"];
if (featuresArray["status"]) s = featuresArray["status"];
var modelFeature = "height = " + h + ",width = " + w + ",left=" + l + ",top=" + t
+ ",model=yes,alwaysRaised=yes" + ",resizable= " + r + ",center=" + c
+ ",dependent=yes,dialog=yes,modal=yes,close=0"
+ ",status=" + s;
var model = window.open(url, "modal", modelFeature, null);
return model;
};
}
}
至少需要jQuery。
答案 3 :(得分：-1)
您可以this link查看jQuery模态，要使用此代码，您需要添加jquery-ui javascript和css个文件