window.showModalDialog与window.open()使用

时间 2019-11-08

标签 window.showmodaldialog window showmodaldialog window.open open 使用栏目 Windows 繁體版

原文原文链接

window.showModalDialog 有些浏览器不兼容，尝试用window.open() 封装替代，须要打开子窗口后向父窗口传递数据。

<html>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

<head></head>
<title>Test dialog</title>

 <input name="selbtn1" type="button" id="selbtn1" onclick="select_Dialog();" value="选择" class="button"/>
<script> 

//选择
function select_Dialog(){

    var returnRes=Dialog('layer.html','window',800,600);
    /*
    if(returnRes)
    {
        var returnArr=returnRes.split("+");
        document.getElementById('kh_id').value=returnArr[0];
        document.getElementById('kh_id_txt').value=returnArr[1];
        document.getElementById('zk').value=returnArr[2];
    }
    */
}

function modalDialog(url, name, width, height){
    if (width == undefined){
        width = 400;
    }
    if (height == undefined){
        height = 300;
    }
    
    if (window.showModalDialog){
        window.open(url,name, 'width=' + (width) + 'px; height=' + (height) + 'px; edge:raised;resizable:yes;scroll:yes;status:no;center:yes;help:no;minimize:yes;maximize:yes;');
    }else{
        x = (window.screen.width - width) / 2;
        y = (window.screen.height - height) / 2;
    
        window.open(url, name, 'height='+height+', width='+width+', left='+x+', top='+y+', toolbar=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, modal=yes');
    }
}

function Dialog(url,name,width,height)
{
    //  测试
     // return showModalDialog(url, name, 'dialogWidth:'+w+'px; dialogHeight:'+h+'px; help: no; scroll: yes; status: no');
     // 
         if (window.showModalDialog)
         {
           window.open(url,name, 'width=' + (width) + 'px; height=' + (height) + 'px; edge:raised;resizable:yes;scroll:yes;status:no;center:yes;help:no;minimize:yes;maximize:yes;');
       }
       else
       {
         x = (window.screen.width - width) / 2;
         y = (window.screen.height - height) / 2;
    
        window.open(url, name, 'height='+height+', width='+width+', left='+x+', top='+y+', toolbar=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, modal=yes');
    }
 }

</script> 


</html>

子窗口返回数据：html

window.returnvalue

window.open 代替showModalDialog

页面A.htm 用 window.open方式弹出页面 B.htm 。
在页面B.htm上选择一个值，肯定关闭窗口后将选择的这个值返回到父窗口A.htm。
A.htm获得返回的值后，给本页面上的文本框赋值。jquery

A.htmlchrome

<html>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

<head></head>
<title>Test dialog</title>

<form name="form1" action="">  
  <input name="feild1" id='field1'>  
  <input name="feild2">  
</form>  

<input name="selbtn1" type="button" id="selbtn1" onclick="select_Dialog();" value="选择" class="button"/>


<script> 

function select_Dialog(){
    var height = 300;  
var width = 500;  
var url = "B.html";  
  
var winOption = "height=" + height + ",width=" + width + ",top=50,left=50,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,fullscreen=0";  
window.open(url, window, winOption);  

}




function sele(NO){ //NO为返回值  
   
     var re= new Array();//若是需返回多个变量，则采用数组把各个变量分开  
     re=NO.split(",");  

     $("input[name='feild1']").val(re[0]);
     $("input[name='feild2']").val(re[1]);
     

   
}  

</script> 


</html>

B.html数组

<html>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

<head></head>
<title>B </title>

<input type="button" value="返回值" onclick="re('Hello,hahah')">  


<script> 

function re(NOre){  
     var NOre = "5,6";

     // 在B页面调用 A页面方法
     window.opener.sele(NOre);  
     
     // 或者直接在子页面给父页面赋值
     // window.opener.document.getElementById("field1").value=name;
     window.close();
}  

</script> 


</html>

另一个封装方法

modal.js浏览器

var has_showModalDialog = !!window.showModalDialog;//定义一个全局变量断定是否有原生showModalDialog方法
if(!has_showModalDialog &&!!(window.opener)){        
    window.onbeforeunload=function(){
        window.opener.hasOpenWindow = false;        //弹窗关闭时告诉opener：它子窗口已经关闭
    }
}
//定义window.showModalDialog若是它不存在
if(window.showModalDialog == undefined){
    window.showModalDialog = function(url,mixedVar,features){
        if(window.hasOpenWindow){
            alert("您已经打开了一个窗口！请先处理它");//避免屡次点击会弹出多个窗口
            window.myNewWindow.focus();
        }
        window.hasOpenWindow = true;
        if(mixedVar) var mixedVar = mixedVar;
        //因window.showmodaldialog 与 window.open 参数不同，因此封装的时候用正则去格式化一下参数
        if(features) var features = features.replace(/(dialog)|(px)/ig,"").replace(/;/g,',').replace(/\:/g,"=");
        //window.open("Sample.htm",null,"height=200,width=400,status=yes,toolbar=no,menubar=no");
        //window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px"); 
        var left = (window.screen.width - parseInt(features.match(/width[\s]*=[\s]*([\d]+)/i)[1]))/2;
        var top = (window.screen.height - parseInt(features.match(/height[\s]*=[\s]*([\d]+)/i)[1]))/2;
        window.myNewWindow = window.open(url,"_blank",features);
    }
}

A.html 父页面app

<html>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="./modal/modal.js"></script>
<head>
    <meta charset="utf-8">
</head>
<title>Test dialog</title>

<div id="content"> 内容哈哈哈 </div>

<input name="selbtn1" type="button" id="selbtn1" onclick="select_Dialog();" value="选择" class="button"/>


<script> 

function select_Dialog(){

    url = "B.html";
    var hotelIdList = window.showModalDialog(url, "hotel", "dialogWidth:1020px;dialogHeight:500px;help:no;resizable:no;center:yes;scroll:yes;status:no");  
    if(!has_showModalDialog) return;//chrome 返回 由于showModalDialog是阻塞的 open不同;    
    $("#content").append(hotelIdList);  
}


function selectHotelChrome(option){//为打开的窗口定义方法，让打开的窗口关闭时经过window.opener赋值回来并执行  
    $("#content").append(option);  
}  

</script> 


</html>

B.html页面：测试

<html>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
    <meta charset="utf-8">
</head>
<title>B </title>

<input type="button" value="返回值" onclick="chooseHotels('Test modal pop')">  


<script> 

function chooseHotels(msg) {  
    /* 
    *省略了本身的业务....... 
    */  
    var contentIds = msg;
    if (window.opener != undefined) { //forchrome   
        window.opener.selectHotelChrome(contentIds); //关闭前调用父窗口方法  
    }    
    else {    
        window.returnValue = contentIds;  
    }  
    window.close();  
}  

</script> 


</html>