window.showModalDialog模式對話方塊 和 window.open的區別
1.模式對話方塊父視窗 彈出模式對話方塊 程式碼如下
Java程式碼- window.showModalDialog(url,window,
- "help:no;scroll:no;resizable:no;status:0;dialogWidth:420px;dialogHeight:200px;center:yes" );
window.showModalDialog(url,window,
"help:no;scroll:no;resizable:no;status:0;dialogWidth:420px;dialogHeight:200px;center:yes" );
1.
引數1 url,url後面可以接"?name=user"引數
引數2 傳遞給子視窗的值 可以是window
可以傳遞物件
引數3 設定子視窗的高度 ,寬度 等元素
dialogHeight :對話方塊高度,不小於100px,IE4中dialogHeight 和 dialogWidth 預設的單位是em,而IE5中是px,為方便
其見,在定義modal方式的對話方塊時,用px做單位。
dialogWidth: 對話方塊寬度。
dialogLeft: 離螢幕左的距離。
dialogTop: 離螢幕上的距離。
center: {yes | no | 1 | 0 }:視窗是否居中,預設yes,但仍可以指定高度和寬度。
help: {yes | no | 1 | 0 }:是否顯示幫助按鈕,預設yes。
resizable: {yes | no | 1 | 0 } [IE5+]:是否可被改變大小。預設no。
status: {yes | no | 1 | 0 } [IE5+]:是否顯示狀態列。預設為yes[ Modeless]或no[Modal]。
scroll:{ yes | no | 1 | 0 | on | off }:指明對話方塊是否顯示滾動條。預設為yes。
下面幾個屬性是用在HTA中的,在一般的網頁中一般不使用。
dialogHide:{ yes | no | 1 | 0 | on | off }:在列印或者列印預覽時對話方塊是否隱藏。預設為no。
edge:{ sunken | raised }:指明對話方塊的邊框樣式。預設為raised。
unadorned:{ yes | no | 1 | 0 | on | off }:預設為no。
2.子父視窗傳值
在子視窗獲取 父視窗的值
var param = window
如果是 陣列或字串物件 可以在子視窗進行相應操作,例如把該值賦給子視窗的某個元素等等
如果傳遞的是 父視窗物件 可以通過 param .document.getElementById('checkAllid2'); 獲取父視窗的
html 元素進行相應的操作
3.模式對話方塊提交
模式對話方塊如果有form需要提交,提交時會新開一個瀏覽器,所以模式對話方塊提交時需要提交到
fream框架頁面 在form元素中加上target="mainFrame"
- <form id="myFrom" action="submit.jsp?checkResult=failure"
- </form>
<form id="myFrom" action="submit.jsp?checkResult=failure" method="post" target="mainFrame">
</form>
target="mainFrame" 是主頁面的 中間框架的id
主頁面
- <frameset id="middleframe" rows="95,8,*,30" cols="*" framespacing="0">
- <frame src="bannar.jsp" name="topFrame" scrolling="NO" noresize border=0 frameborder=0>
- <frame src="scollbar.htm" name="ScollbarFrame" scrolling="NO" noresize border=0 frameborder=0 >
- <frameset id="bodyFrame" rows="*" cols="230,8,*" framespacing="0" border="0" >
- <frame src="menu.jsp" name="leftFrame" scrolling="no" noresize border=0 frameborder=0>
- <frame src="Scoll.htm" name="ScollFrame" scrolling="NO" noresize border=0 frameborder=0>
- <frame src="main_tab.jsp" name="mainFrame" id="mainFrame" scrolling="auto" border=0 frameborder=0><!--
- main/main_tab.html -->
- </frameset>
- <frame src="bottom.jsp" scrolling="NO" name="bottomFrame" id="bar" border=0 frameborder=0>
- </frameset>
<frameset id="middleframe" rows="95,8,*,30" cols="*" framespacing="0">
<frame src="bannar.jsp" name="topFrame" scrolling="NO" noresize border=0 frameborder=0>
<frame src="scollbar.htm" name="ScollbarFrame" scrolling="NO" noresize border=0 frameborder=0 >
<frameset id="bodyFrame" rows="*" cols="230,8,*" framespacing="0" border="0" >
<frame src="menu.jsp" name="leftFrame" scrolling="no" noresize border=0 frameborder=0>
<frame src="Scoll.htm" name="ScollFrame" scrolling="NO" noresize border=0 frameborder=0>
<frame src="main_tab.jsp" name="mainFrame" id="mainFrame" scrolling="auto" border=0 frameborder=0><!--
main/main_tab.html -->
</frameset>
<frame src="bottom.jsp" scrolling="NO" name="bottomFrame" id="bar" border=0 frameborder=0>
</frameset>
4.可以通過window.returnValue向開啟對話方塊的視窗返回資訊,當然也可以是物件。例
- parent.htm
- <script>
- str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");
- alert(str);
- </script>
- modal.htm
- <script>
- window.returnValue="http://www.web3.cn";
- </script>
parent.htm
<script>
str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px");
alert(str);
</script>
modal.htm
<script>
window.returnValue="http://www.web3.cn";
</script>
2.window.open
window.open開啟視窗時 可以開啟多個 且焦點不會鎖定在子視窗,仍然能夠操作父視窗。這樣的特點使得某些情況下
我們最好不要用open打去開一個子視窗
父視窗開啟子視窗程式碼
- window.open(url, "","help=no,toolbar=no,height=330,width=515,top=50,left=50,resizable=no,status=no,toolbar=no,menubar=no,directories ,titlebar=no,location=no");
window.open(url, "","help=no,toolbar=no,height=330,width=515,top=50,left=50,resizable=no,status=no,toolbar=no,menubar=no,directories ,titlebar=no,location=no");
引數1.url,url後面可以接"?name=user"
引數2.彈出視窗的名字(非檔名) 可以為空
引數3.設定子視窗的高度 ,寬度 等屬性
height=100 視窗高度;
width=400 視窗寬度;
top=0 視窗距離螢幕上方的象素值;
left=0 視窗距離螢幕左側的象素值;
toolbar=no 是否顯示工具欄,yes為顯示;
menubar,scrollbars 表示選單欄和滾動欄。
resizable=no 是否允許改變視窗大小,yes為允許;
location=no 是否顯示位址列,yes為允許;
status=no 是否顯示狀態列內的資訊(通常是檔案已經開啟),yes為允許;