How to make Chrome support showModalDialog
2016-03-02 23:40
260 查看
My leader has solved this problem, let's see the trick.
For IE, in main window:
ModalDialog, sub window:
The above codes work fine in IE, we can fix to this:
In main window:
ModalDialog, sub window:
And add some code to fix prototype of Chrome:
dialog.addEventListener('close', function() {
var returnValue = dlgBodyWin.returnValue;
top.window.document.body.removeChild(dialog);
dialog.callback(returnValue);
});
function __window_close(){
if (__ISGG) { //In chrome
var dialogs = top.window.parent.document.getElementsByTagName("dialog");
if ( dialogs.length > 0) {
dialogs[dialogs.length - 1].close();
}
} else {
window.close();
}
}
Use HTML5 Dialog to implement showModalDialog, awesome.
For IE, in main window:
var result = window.showModalDialog( url,arguments,dialogSettings); alert(result);
ModalDialog, sub window:
window.returnValue = "abc"; window.close;
The above codes work fine in IE, we can fix to this:
In main window:
var dialog = window.showModalDialog(url,arguments,dialogSettings); dialog.callback = function(p_result) { alert(p_result); }
ModalDialog, sub window:
window.returnValue = "abc"; __window_close();
And add some code to fix prototype of Chrome:
window.showModalDialog = function(url, arg, opt) { url = url || ''; //URL of a dialog arg = arg || null; //arguments to a dialog opt = opt || 'dialogWidth:300px;dialogHeight:200px'; //options: dialogTop;dialogLeft;dialogWidth;dialogHeight or CSS styles × var dialog = top.window.document.body.appendChild(document.createElement('dialog')); dialog.setAttribute('style', opt.replace(/dialog/gi, '')); dialog.innerHTML = '<div id="dlg-head" class="dlgHead"><div id="dlg-title"></div><div id="dlg-conTrolBox"><a href="javascript:void(0);" id="dlg-closeButton" class="controlBoxButton"></a></div></div><div id="dlg-body" class="dlgBody"><iframe id="dialog-body" src="' + url + '" style="border: 0; width: 100%; height: 100%;"></iframe></div>'; var dlgBodyWin = dialog.querySelector('#dialog-body').contentWindow; dlgBodyWin.dialogArguments = arg; dlgBodyWin.addEventListener('load', function(e) { dialog.querySelector('#dlg-title').innerText = dlgBodyWin.document.title; }); dialog.querySelector('#dlg-closeButton').addEventListener('click', function(e) { e.preventDefault(); dialog.close(); });
dialog.showModal(); dialog.callback = function(){};
dialog.addEventListener('close', function() {
var returnValue = dlgBodyWin.returnValue;
top.window.document.body.removeChild(dialog);
dialog.callback(returnValue);
});
return dialog; };
function __window_close(){
if (__ISGG) { //In chrome
var dialogs = top.window.parent.document.getElementsByTagName("dialog");
if ( dialogs.length > 0) {
dialogs[dialogs.length - 1].close();
}
} else {
window.close();
}
}
Use HTML5 Dialog to implement showModalDialog, awesome.
相关文章推荐
- Hive环境搭建心得(Ubuntu)
- POJ 3041 匈牙利算法模板题
- Docker的安装及简单使用
- LAMP 环境搭建过程
- new二维数组
- 分库分表之当当开源中间件sharding-jdbc体验
- 彻底解决Fragment重复加载问题,杜绝一切卡顿现象
- 线程池
- 内存映射大文件
- css那些属性可以继承
- RGB与HSB之间的转换公式
- 用C语言实现求1+2+3+4+5+6的值
- Android中.9图片的了解和制作过程
- [LeetCode OJ]16. 3Sum Closest
- 图像之超简单方式实现微信头像功能
- 结构体的序列和还原(使用Move方法)
- 自己动手为PHP7添加新的语法特性
- jquery是如何架构的.
- ScrollView反弹效果 仿小米私密短信效果(转)
- 博弈