天天看點

showModalDialog以及IE7 對話框樣式

window.showmodaldialog(url,dialogargments.features) 打開一個新視窗

url為要開啟的網頁名字。

dialogargments為設定好傳遞給新視窗網頁的參數,可以為任意資料類型。

feature 與open()的類似,都是格式方面的設定。調用格式為featurename1:featurevalue1:(分号)featurename2:featurevalue2:

關于feature具體的參數我就不詳細寫了,看名字就應該知道什麼用處了吧。

certer , dialogheight, dialogleft,dialogtop,dialogwidth,help(是否顯示help按鈕,下同),status,resizeable

值=1為yes,0為no.

我認為最重要的是dialogargments,可以傳遞值到新的視窗。

第二重要就是 它的傳回值 window.returnvalue.可以在showmodaldialog開啟的視窗關閉後前,回傳一個任意類型的值。

使用示例:

showModalDialog以及IE7 對話框樣式
showModalDialog以及IE7 對話框樣式

<script language="javascript">...

showModalDialog以及IE7 對話框樣式
showModalDialog以及IE7 對話框樣式

function show()...{

showModalDialog以及IE7 對話框樣式

    var sret = window.showmodaldialog('a.html','title','scrollbars=no;resizable=no;help=no;status=no;dialogtop=25; dialogleft=0;dialogheight=350px;dialogwidth=410px;');

showModalDialog以及IE7 對話框樣式

        if(sret == "refresh") 

showModalDialog以及IE7 對話框樣式
showModalDialog以及IE7 對話框樣式

        ...{

showModalDialog以及IE7 對話框樣式

            window.location.reload();

showModalDialog以及IE7 對話框樣式

        }

showModalDialog以及IE7 對話框樣式
showModalDialog以及IE7 對話框樣式

}

showModalDialog以及IE7 對話框樣式

</script>

showModalDialog以及IE7 對話框樣式

<input name="" type="button" onclick="show();" value="打開" />

showModalDialog以及IE7 對話框樣式
showModalDialog以及IE7 對話框樣式
showModalDialog以及IE7 對話框樣式
showModalDialog以及IE7 對話框樣式
showModalDialog以及IE7 對話框樣式

    function al()...{

showModalDialog以及IE7 對話框樣式

        alert("關閉了哦");

showModalDialog以及IE7 對話框樣式

        window.returnvalue = "refresh";

showModalDialog以及IE7 對話框樣式

        window.close();

showModalDialog以及IE7 對話框樣式

    }

showModalDialog以及IE7 對話框樣式
showModalDialog以及IE7 對話框樣式

<input name="" type="button" onclick="al();" value="關閉" />

下面對ie7中使用該函數的不同進行一下解釋。順便要注意的是,ie7對标簽的驗證是非常嚴格的,以前随便寫的<base target="_self"/>必須放在

showModalDialog以及IE7 對話框樣式

<title>标題</title>

showModalDialog以及IE7 對話框樣式

<base target="_self"/>

下面,否則就不會有效。切記切記!好了,下面對視窗的大小問題進行以下解釋吧。

1、模态視窗自适應:

在internet explorer中定義window.open 和 window.showmodaldialog以打開一個網頁對話框的時候,在不同版本的windows和不同版本的ie中,視窗的大小和樣式都是不同的。 在ie7中更是有了很大的不同,狀态欄,主要内容被預設保留(下詳),還加了一個隻讀狀态的位址欄.視窗的最小尺寸被限定在了250*150:

showModalDialog以及IE7 對話框樣式

如上圖所示:在ie7中,定義的高度僅僅是窗體内容高度,狀态欄及位址欄的高度都不算在内的;而ie6則包含了狀态欄及位址欄的高度。是以,我們需要依據不同的作業系統及ie版本,高度自适應的js代碼如下:

/**

 * 模态視窗高度調整.

 * 根據作業系統及ie不同版本,重新設定視窗高度,避免滾動條出現.

 */

function resetdialogheight(){

  if(window.dialogarguments == null){

    return; //忽略非模态視窗

  }

  var ua = navigator.useragent;

  var height = document.body.offsetheight;

  if(ua.lastindexof("msie 6.0") != -1){

  if(ua.lastindexof("windows nt 5.1") != -1){

    //alert("xp.ie6.0");

    var height = document.body.offsetheight;

    window.dialogheight=(height+102)+"px";

  else if(ua.lastindexof("windows nt 5.0") != -1){

    //alert("w2k.ie6.0");

    window.dialogheight=(height+49)+"px";

模态視窗頁面加上如下代碼:

//視窗加載後,判斷系統及其ie版本調整高度

window.onload = resetdialogheight;

2、ie7中模态視窗送出時新開視窗問題:

ie 7.0對模态視窗<base target='_self'>屬性的放置位置更加嚴格。<base>标簽必須放置在<head>标簽對中,否則送出表單時總是會新開視窗。示例如下 :

<html>

<head>

.. .. ..

</head>

<body onload="pageclose();" scroll="no">

</body>

</html>

繼續閱讀