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>

相關標籤/搜索

window.showmodaldialog

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。