javascript showModalDialog jquery 插件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25719711/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
showModalDialog jquery plugin
提问by Ihtsham Minhas
In my old application we are using showModalDialog , As all of you know the The latest Chrome has removed support for showModalDialog which is a pain. I am looking for a quick fix like jquery plugin. e.g. $window.showModalDialog(dialog, varArgIn, varOptions); ….
在我的旧应用程序中，我们使用的是 showModalDialog ，众所周知，最新的 Chrome 已经取消了对 showModalDialog 的支持，这很痛苦。我正在寻找像 jquery 插件这样的快速修复。例如 $window.showModalDialog(dialog, varArgIn, varOptions); ……
回答by Yuriy Galanter
You can temporary re-enable showModalDialog support until May of 2015 (see https://stackoverflow.com/a/25663402/961695).
您可以在 2015 年 5 月之前临时重新启用 showModalDialog 支持（请参阅https://stackoverflow.com/a/25663402/961695）。
Use that time to update your code. There will be no "quick fix". One thing that showModalDialog did that no plugin will do - it stopped code execution until dialog is closed and dialog result is returned to the caller. You will have to refactor your code to use callback functions instead. Then you can use things like jQuery UI Dialog
利用这段时间更新您的代码。不会有“快速修复”。showModalDialog 做的一件事没有插件会做 - 它停止代码执行，直到对话框关闭并将对话框结果返回给调用者。您将不得不重构代码以改用回调函数。然后你可以使用像jQuery UI Dialog这样的东西
回答by Ken Forslund
This URL is an article somebody wrote in 2011 that supplies a jquery replacement for showModalDialog.
这个 URL 是某人在 2011 年写的一篇文章，它为 showModalDialog 提供了一个 jquery 替代品。
http://extremedev.blogspot.com/2011/03/windowshowmodaldialog-cross-browser-new.html
http://extremedev.blogspot.com/2011/03/windowshowmodaldialog-cross-browser-new.html
I am using it on my own projects. The only issue I have (that I recently discovered) is if my parent page is scrollable, I can scroll the parent window down, and get to page elements I'm not supposed to.
我在我自己的项目中使用它。我唯一的问题（我最近发现的）是如果我的父页面是可滚动的，我可以向下滚动父窗口，并进入我不应该滚动的页面元素。
Other than that, it works great (ie. for a page that doesn't scroll, I launch the modal dialog, and it masks access to the parent page, and returns a value on close of the modal dialog, and the modal dialog content comes from a URL just like the original showModalDialog function).
除此之外，它工作得很好（即，对于不滚动的页面，我启动模态对话框，并屏蔽对父页面的访问，并在模态对话框关闭时返回一个值，以及模态对话框内容来自一个 URL，就像原始的 showModalDialog 函数一样）。
Here is the entirety of my version of his code. I added some helper functions and such. Just include the usual jquery stuff, then this, and follow his example for spawning a dialog.
这是我的完整代码版本。我添加了一些辅助功能等。只需包含通常的 jquery 内容，然后是这个，然后按照他的示例生成一个对话框。
// Based on this article: http://extremedev.blogspot.com/2011/03/windowshowmodaldialog-cross-browser-new.html
/*
Usage example:
var url = 'test.html';
$.showModalDialog({
url: url,
height: 500,
width: 900,
scrollable: false,
onClose: function(){ var returnedValue = this.returnValue; }
});
UPDATE August 2012: Looks like there is a problem when setting DocType: HTML 4.01 Doctype on top of extremedevStart.html. --> The popup does not close.
To fix this use:
$dlg.dialogWindow.dialog('close');
instead of:
window.close();
*/
var $dialog = null;
jQuery.showModalDialog = function (options) {
var defaultOptns = {
url: null,
dialogArguments: null,
height: 'auto',
width: 'auto',
position: 'center',
resizable: true,
scrollable: true,
onClose: function () { },
returnValue: null,
doPostBackAfterCloseCallback: false,
postBackElementId: null
};
var fns = {
close: function () {
opts.returnValue = $dialog.returnValue;
$dialog = null;
opts.onClose();
if (opts.doPostBackAfterCloseCallback) {
postBackForm(opts.postBackElementId);
}
},
adjustWidth: function () { $frame.css("width", "100%"); }
};
// build main options before element iteration
var opts = $.extend({}, defaultOptns, options);
var $frame = $('<iframe id="iframeDialog" />');
if (opts.scrollable)
$frame.css('overflow', 'auto');
$frame.css({
'padding': 0,
'margin': 0,
'padding-bottom': 10
});
var $dialogWindow = $frame.dialog({
autoOpen: true,
modal: true,
width: opts.width,
height: opts.height,
resizable: opts.resizable,
position: opts.position,
overlay: {
opacity: 0.5,
background: "black"
},
close: fns.close,
resizeStop: fns.adjustWidth
});
$frame.attr('src', opts.url);
fns.adjustWidth();
$frame.load(function () {
if ($dialogWindow) {
var maxTitleLength = 50;
var title = $(this).contents().find("title").html();
if (title.length > maxTitleLength) {
title = title.substring(0, maxTitleLength) + '...';
}
$dialogWindow.dialog('option', 'title', title);
}
});
$dialog = new Object();
$dialog.dialogArguments = opts.dialogArguments;
$dialog.dialogWindow = $dialogWindow;
$dialog.returnValue = null;
}
//function postBackForm(targetElementId) {
// var theform;
// theform = document.forms[0];
// theform.__EVENTTARGET.value = targetElementId;
// theform.__EVENTARGUMENT.value = "";
// theform.submit();
//}
var prntWindow = getParentWindowWithDialog(); //$(top)[0];
var $dlg = prntWindow && prntWindow.$dialog;
function getParentWindowWithDialog() {
var p = window.parent;
var previousParent = p;
while (p != null) {
if ($(p.document).find('#iframeDialog').length) return p;
p = p.parent;
if (previousParent == p) return null;
// save previous parent
previousParent = p;
}
return null;
}
function setWindowReturnValue(value) {
if ($dlg) $dlg.returnValue = value;
window.returnValue = value; // in case popup is called using showModalDialog
}
function getWindowReturnValue() {
// in case popup is called using showModalDialog
if (!$dlg && window.returnValue != null)
return window.returnValue;
return $dlg && $dlg.returnValue;
}
if ($dlg) window.dialogArguments = $dlg.dialogArguments;
if ($dlg) window.close = function () { if ($dlg) $dlg.dialogWindow.dialog('close'); };
function CloseWindow() {
if ($dlg) {
$dlg.dialogWindow.dialog('close');
} else {
ForceCloseWindow();
}
}
function ForceCloseWindow() {
var browserName = navigator.appName;
var browserVer = parseInt(navigator.appVersion);
//alert(browserName + " : "+browserVer);
//document.getElementById("flashContent").innerHTML = "<br> <font face='Arial' color='blue' size='2'><b> You have been logged out of the Game. Please Close Your Browser Window.</b></font>";
if (browserName == "Microsoft Internet Explorer") {
var ie7 = (document.all && !window.opera && window.XMLHttpRequest) ? true : false;
if (ie7) {
//This method is required to close a window without any prompt for IE7 & greater versions.
window.open('', '_parent', '');
window.close();
}
else {
//This method is required to close a window without any prompt for IE6
this.focus();
self.opener = this;
self.close();
}
} else {
//For NON-IE Browsers except Firefox which doesnt support Auto Close
try {
this.focus();
self.opener = this;
self.close();
}
catch (e) {
}
try {
window.open('', '_self', '');
window.close();
}
catch (e) {
}
}
}
