How to make Chrome support showModalDialog

My leader has solved this problem, let‘s see the trick.

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"‘+ (arg && arg.title ? arg.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.

时间: 2024-10-23 22:42:41

How to make Chrome support showModalDialog的相关文章

Google Chrome 55 Released – Install on RHEL/CentOS 7/6 and Fedora 25-20

Google Chrome is a freeware web browser developed by Google Inc. Google Chrome team proudly announced the release of Google Chrome 55 on December 01, 2016. The actual version is 55.0.2883.75 for Linux and Mac OS X/Windows operating system. This new v

SHINE OPENCART 自适应 多用途主题模板 ABC-0021

SHINE OPENCART 自适应 多用途主题模板 ABC-0021 Shine is a responsive multipurpose OpenCart theme which is fully customizable and suitable for any kind of OpenCart store on any device. This responsive theme is a general purpose responsive theme which can be high

Chrome不支持showModalDialog模态对话框和无法返回returnValue的问题

父窗体部分js代码: 1 var returnValue = window.showModalDialog("son.html ", window); 2 //for chrome 3 if (returnValue == undefined) { 4 returnValue = window.returnValue; 5 } 子窗体部分js代码: if (window.opener != undefined) { //for chrome window.opener.returnVa

谷歌浏览器Chrome不再支持showModalDialog的解决办法

问题重现 弹出窗口编码: JavaScript 0 1 2 3 4 5 6 7 var obj = new Object(); var retval = window.showModalDialog("request.aspx",obj,"dialogWidth=500px;dialogHeight=300px"); if (retval == null) { ... }else { ... } 浏览器异常: Shell 0 1 Uncaught TypeError

解决chrome浏览器无法得到window.showModalDialog返回值的问题

父页面处理: function ProductList() {   var TypeID = window.document.getElementById("Type").value;   var returnvalues = window.showModalDialog('ProductList.aspx?Type=' + TypeID,'window','dialogWidth=700px;dialogHeight=680px');    if(returnvalues!=unde

关于chrome等浏览器不支持showModalDialog的解决方案

目前,新版本的chrome和opera.Firefox等浏览器已经不支持showModalDialog方法. 如果是没有接收返回值的,可以直接将window.showModalDialog改为window.open. 需要接收返回值的情况: 父页面设置: var uIdName; function chooseuser_m() { var num = Math.random(); var str = "" + document.getElementById('wfUserIDs').v

新版本火狐 ,Chrome不支持showModalDialog解决办法

平常的网站中,有时我们会希望使用者按下按钮后开启一个保持在原窗口前方的子窗口,在IE中,我们可以使用showModalDialog来达成,但是chrome早就不支持showModalDialog,最近我的火狐也不支持了,所以就去网上找了下解决办法,与大家共享: 原来代码是这样: function showDialog(url, w, h){ showModalDialog(url, self, 'dialogWidth='+w+'px;dialogHeight='+h+'px');} 然后为了兼

Chrome showModalDialog undefined is not a function 的替代方案

function myShowModalDialog(url, width, height, fn) { if (navigator.userAgent.indexOf("Chrome") > 0) { window.returnCallBackValue354865588 = fn; var paramsChrome = 'height=' + height + ', width=' + width + ', top=' + (((window.screen.height -

showModalDialog改进版,包括Chrome下的特殊处理

父页面: if(window.ActiveXObject){ //IE          $("#choose_entp").click(function(){              var returnValue = window.showModalDialog("SelectEntpInfo.do?mod_code=${af.map.mod_code}&xxx=" + Math.random(), window, "dialogWidth: