码迷,mamicode.com
首页 > 其他好文 > 详细

How to make Chrome support showModalDialog

时间:2016-03-03 01:20:21      阅读:235      评论:0      收藏:0      [点我收藏+]

标签:

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.

How to make Chrome support showModalDialog

标签:

原文地址:http://www.cnblogs.com/ceinx1984/p/5237003.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!