[原創]使用自定義的alert和confirm

原理,定義自己定義的alert頁面(Message.jsp)和confirm頁面(confirm.jsp),
之後通過showModalDialog,在javascript中顯示和alert()和confirm()相同的效果。

Message.jsp

<%@ page contentType="text/html; charset=GB2312" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//CN">
<HTML>
 <HEAD>
  <title>Message</title>
  <meta content="JavaScript" name="vs_defaultClientScript">
  <LINK href="../ScmStyle.css" type="text/css" rel="stylesheet">
  <script language="javascript">
   document.title = window.dialogArguments[0];
   function OnLoading(){
    var Args = window.dialogArguments;
    document.all("divMessage").innerText = Args[1];
    if(Args[2]=="err"){
     document.all("Img1").src="../images/bq_r1_c1.gif";     
     document.all("divMessage").style.color = "#ff0000";
    }else if(Args[2]=="info"){
     document.all("Img1").src="../images/zy_r1_c1.gif";     
     document.all("divMessage").style.color = "#000000";
    }else{
     document.all("Img1").src="../images/cg_r1_c1.gif";     
     document.all("divMessage").style.color = "#000000";
    }
   }
  </script>
 </HEAD>
 <body οnlοad="OnLoading();" leftmargin="0" topmargin="0">
  <table width="420" cellspacing="0" cellpadding="0" height="165" background="../images/gr.gif">
    <tr align="center">
   <td width="143" height="37">&nbsp;</td>
   <td width="277" height="37">&nbsp;</td>
    </tr>
    <tr align="center">
   <td width="143" height="72" valign="bottom"><img id="Img1" src="" width="81" height="81"></td>
   <td width="277" height="72">
    <div id="divMessage" style="WIDTH: 250px" align="center">
    </div>
   </td>
    </tr>
    <tr align="center">
   <td width="143">&nbsp;</td>
   <td width="272">
    <img src="../images/close1.gif" width="112" height="25" onClick="window.close();" style='cursor:hand;'>
   </td>
    </tr>
  </table>
 </body>
</HTML>

 

confirm.jsp

<html>
<head>
<script language="javascript">
<!--
var args = window.dialogArguments
try{
 document.title = args[0]; //設置標題
}catch(e)
{
//這裏屏蔽了錯誤,防止萬一調用的傳遞參數不足
}    
//-->
</script>
<script language="javascript">
function init()
{
 var args = window.dialogArguments;
 
 try{
  message.innerHTML = args[1]; //設置提示的信息
  if(args[2] == 1)    //設置按鈕的選中狀態
   ok.focus();
  else
   cancel.focus();
  
 }catch(e)
 {
 //這裏屏蔽了錯誤,防止萬一調用的傳遞參數不足
 }
 ok.attachEvent("onclick",okClick); //設置YES按鈕的事件處理函數
 cancel.attachEvent("onclick",cancelClick);//設置NO按鈕的事件處理函數
}
function okClick()//YES按鈕的事件處理函數
{
  window.returnValue = true;
  window.close();
}
function cancelClick()//NO按鈕的事件處理函數
{
  window.returnValue = false
  window.close();
}
window.attachEvent("onload",init)


</script>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<link rel="stylesheet" href="../ScmStyle.css" type="text/css">
</head>

<body bgcolor="F4F7F7" text="#000000" leftmargin="0" topmargin="0">
<table width="420" cellspacing="0" cellpadding="0" height="165" background="../images/pp01.gif">
  <tr>
    <td width="138" align="center"><img src="../images/pp03.gif" width="55" height="49"></td>
    <td width="280" align="center">
      <table width="95%" cellspacing="0" cellpadding="5" height="100%">
        <tr>
          <td height="20" valign="bottom">&nbsp;</td>
        </tr>
        <tr>
          <td align="center" valign="top"><div id="message"></div></td>
        </tr>
        <tr>
          <td align="center" height="70" valign="top">
            <table width="85%" cellspacing="0" cellpadding="0" height="40">
              <tr align="center">
                <td width="50%"><a href="#"><img src="../images/ppok.gif" id="ok" width="92" height="25" border="0"></a></td>
                <td width="50%"><a href="#"><img src="../images/ppcancle.gif" id="cancel" width="92" height="25" border="0"></a></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>


調用alert,使用自定義的showMessage()
function showMessage(title,info,type){ 
    var Args = new Array(title,info,type);
 var locationURL = DynamicHtmlGetApplicationUrlRoot()+"common/Message.jsp";
    window.showModalDialog(locationURL,Args,"dialogWidth=420px;dialogHeight=190px;resizable:no;scroll:no;status:no");
}

調用confirm,使用自定義的showConfirm()
function showConfirm(strTitle,strMessage)

 var locationURL = "/common/confirm.jsp";
 var args = new Array();
 args[args.length] = strTitle;
 args[args.length] = strMessage;
 args[args.length] = 1;
 var result = showModalDialog(locationURL,args,"dialogWidth=425px;dialogHeight=190px;resizable:no;scroll:no;status:no");
 return result;
}

參加jsp中實例
showMessage("信息提示","密碼不能爲空!","info");
if (showConfirm("工作流模塊","提交任務號爲:" + workflowid + " 的任務嗎?")){}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章