在BS系統中使用模態對話框(showModalDialog)的解決方案

2019-11-17 06:33:33

字體：大中小

來源：轉載

供稿：網友

我們知道在BS系統中假如想使用模態對話框,我們就要用window.showModalDialog()這個方法, showModalDialog()方法是用來創建一個顯示Html內容的模態對話框,這篇文檔是用來對使用showModalDialog()產生模態對話框進行各種應用時產生的問題的解決方法,這篇文檔適用于asp,php,jsp等多種web技術，下面sample代碼的我會用jsp。
注：這篇文檔不涉及showModalDialog()方法的說明
需要了解的請參閱 Msdn文檔，和KingErq網友的文檔
http://dev.csdn.net/develop/article/44/44896.shtm

我們先寫一個大家都很熟悉的showModalDialog()最簡單的使用－我們重寫一下javascript中window的alert()方法.
我們先做的事情是新建一個文件alert.jsp
代碼為:
<%@ page contentType="text/html;charset=GBK" language="Java" pageEncoding="GBK" %>
<%
request.setCharacterEncoding("GBK");
String msg=request.getParameter("msg");%>
<html xmlns:wsc>
<head>
<title>#您的系統名稱#----------------------------</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language=Javascript>
function findenter()
{
if (event.keyCode==13)
window.close();
}
</script>
</head>
<body onkeydown=javascript:findenter();>
<center>
<div style="overflow:auto;height:60px" align="center">
<%=msg%>
</div>
<input type=Button value="確定" onclick="javascript:window.close();">
</center>
</body>
</html>

然后在你BS系統的unit.js文件中添加下面一個方法
function alert(msg)
{
    var w=250;
    var h=150;
    posLeft=(screen.width-w)/2
posTop=(screen.height-h)/2
showModalDialog("alert.jsp?msg=" + msg,"","status:no;dialogHeight: " + h +"px; dialogWidth: " + w +"px;status:no;scroll:no;dialogTop: " + posTop + "px; dialogLeft: " + posLeft + "px'");
}
這時候在引用了unit.js的頁面中用 alert()方法時，出現的模式對話框就是我們自己定義的alert.jsp對話框了.用這種方法,我們可以在我們的系統中用showModalDialog方法把 window.alert(), window.confirm(),window.PRompt() 等ie的默認的提示框都重寫一邊,這樣系統的ui風格就得到了統一,更加美觀.

用showModalDialog模擬alert是他最簡單的應用,而大部分的BS系統中我們使用模態對話框的目的是有一個清單頁面list.jsp,我們要雙擊list.jsp頁面的一條記錄時彈出edit.jsp這個模態對話框,對這條記錄進行編輯,這時候問題來了,在模態對話框的文件是不能重新載入的,就是說假如我們在edit.jsp文件里把<form>的數據post到save.jsp的時候，save.jsp不會在模態對話框里出現,而是彈出一個新的IE窗口,這顯然是不能忍受的.這個問題的解決方法是這樣的:
我們建立一個中間頁面比如openWindow.jsp
我們想在模態對話框中打開edit.jsp的時候調用
showModalDialog打開openWindow.jsp頁面,并把edit.jsp的文件名通過get方法傳遞給openWindow.jsp.