天天看點

使用javascript打開模态對話框

1. 标準的方法

<mce:script type="text/javascript"><!--

function openwin(src, width, height, showscroll){

window.showmodaldialog (src,"","location:no;status:no;help:no;dialogwidth:"+width+";dialogheight:"+height+";scroll:"+showscroll+";");

}

// --></mce:script>  

例:<span style="cursor: pointer" onclick="openwin  

(’http://www.deepteach.com’, ’500px’, ’400px’, ’no’)">點選</span> 

2. 要注意的是,firefox并不支援該功能,它支援的文法是

window.open  

(’openwin.html’,'newwin’, 'modal=yes, width=200,height=200,resizable=no, scrollbars=no’ ); 

3. 如何自動判斷浏覽器

<input type="button" value="打開對話框" onclick="showdialog('#')"/>

<script language="javascript">

<!--

function showdialog(url)

{

if( document.all ) //ie

feature="dialogwidth:300px;dialogheight:200px;status:no;help:no";

window.showmodaldialog(url,null,feature);

else

//modelessdialog可以将modal換成dialog=yes

feature ="width=300,height=200,menubar=no,toolbar=no,location=no,";

feature+="scrollbars=no,status=no,modal=yes";

window.open(url,null,feature);

//-->

</script> 

4. 如何在頁面之間傳遞數值

(一)showmodaldialog使用例子,父視窗向子視窗傳遞值,子視窗設定父視窗的值,子視窗關閉的時候傳回值到父視窗.

farther.html

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">

<html>

<head>

<title>new document </title>

<meta content="editplus" name="generator">

<meta content="" name="author">

<meta content="" name="keywords">

<meta content="" name="description">

<mce:script language="javascript"><!--

function openchild(){

var k = window.showmodaldialog("child.html",window,"dialogwidth:335px;status:no;dialogheight:300px");

if(k != null)

document.getelementbyid("txt11").value = k;

// --></mce:script>

</head>

<body>

<font face="宋體"></font>

<br>

傳遞到父視窗的值:<input id="txt9" type="text" value="3333333333333" name="txt9"><br>

傳回的值:<input id="txt11" type="text" name="txt11"><br>

子視窗設定的值:<input id="txt10" type="text" name="txt10"><br>

<input id="button1" onclick="openchild()" type="button" value="openchild" name="button1">

</body>

</html> 

child.html

--------------

<meta http-equiv="expires" content="0">

<meta http-equiv="cache-control" content="no-cache">

<meta http-equiv="pragma" content="no-cache">

        父視窗傳遞來的值:<input id="txt0" type="text" name="txt0"><br>

        輸入要設定父視窗的值:<input id="txt1" type="text" name="txt1"><input id="button1" onclick="setfather()" type="button" value="設定父視窗的值" name="button1"><br>

        輸入傳回的值:<input id="txt2" type="text" name="txt2"><input id="button2" onclick="retrunvalue()" type="button" value="關閉切傳回值" name="button2">

<input id="button3" onclick="" type="button" value="關閉重新整理父視窗" name="button3">

<script language="javascript">

var k=window.dialogarguments; 

//獲得父視窗傳遞來的值 

if(k!=null) 

        { 

        document.getelementbyid("txt0").value = k.document.getelementbyid("txt9").value; 

        } 

//設定父視窗的值 

function setfather() 

        k.document.getelementbyid("txt10").value = document.getelementbyid("txt1").value 

//設定傳回到父視窗的值 

function retrunvalue() 

var s = document.getelementbyid("txt2").value; 

        window.returnvalue=s; 

        window.close(); 

//--> 

</script>

</html>

----------------------------

說明:

由于showmodaldialog緩存嚴重,下面是在子視窗取消用戶端緩存的設定.也可以在伺服器端取消緩存,參考:

http://adandelion.cnblogs.com/articles/252137.html

(二)下面是關閉重新整理父視窗的例子

-----------------------

<meta name="generator" content="editplus">

<meta name="author" content="">

<meta name="keywords" content="">

<meta name="description" content="">

function openchild() 

var k = window.showmodaldialog("child.html",window,"dialogwidth:335px;status:no;dialogheight:300px"); 

if(k == 1)//判斷是否重新整理 

        alert('重新整理'); 

        window.location.reload(); 

        傳遞到父視窗的值:<input id="txt9" type="text" value="3333333333333" name="txt9"><br>

<input type="button" value="openchild" onclick="openchild()" id="button1" name="button1">

----------------------

<input id="button1" onclick="winclose(1)" type="button" value="關閉重新整理父視窗" name="button1">

<input id="button2" onclick="winclose(0)" type="button" value="關閉不重新整理父視窗" name="button2">

//關閉視窗傳回是否重新整理的參數. 

function winclose(isrefrash) 

        window.returnvalue=isrefrash; 

繼續閱讀