效果图：
<html>
<head>
<title>对话框</title>
<link rel="stylesheet" type="text/css" href="/modules/commons/css/dialog.css">
<script src="/modules/commons/js/prototype.js"></script>
<script src="/modules/commons/js/dialog.js"></script>
</head>
<body>
<div id="Contain">
<div id="ICO" style="position:absolute; left:0px; top:5px;"></div>
<div id="Message"></div>
<div id="Buttons"></div>
</div>
</body>
<script>
Event.observe(window, 'load', function(){
//check base config and parameter
var objIn = window.dialogArguments
var arrBt = ['确定:1', '取消:0']
if(objIn){
if(objIn.ArrBt){
arrBt = objIn.ArrBt
}
if(objIn.Message){
$('Message').innerHTML = objIn.Message
}
}else{
alert('tell me what u want to let user to confirm or alert information')
return
}
//ico
var ICO = $('ICO')
var img = document.createElement('img')
if(objIn.ICO){
img.src = objIn.ICO
}else{
img.src = Dialog.Alert
}
ICO.appendChild(img)
//button
var Buttons = $('Buttons')
arrBt.each(function(bt){
var input = document.createElement('input')
input.type = 'button'
var arr = bt.split(':')
input.value = arr[0]
input.returnValue = arr[1]
input.onclick = ClickBt
Buttons.appendChild(input)
})
}, false)
function ClickBt(){
window.returnValue = this.returnValue
window.close()
}
</script>
</html>
调用方法的封装
/**//*
2007-01-18 lisq custom dialog
use age:
<script src="/modules/commons/js/dialog.js"></script>
var objIn = {
Message : 'your message',
ArrBt : ['保存:1', '不保存:2', '取消:3']
}
var objOut = Dialog.Show(objIn)
if(objOut == 1){
save it
}else if(objOut == 2){
not save it
}else if(objOut == 3){
u click cancle
}
*/
var Dialog = {
Show : function(objIn){
var url = '/Commons/Dialog.do'
var style = 'dialogHeight:110px; dialogWidth:250px; edge:Raised; scroll:no; center:Yes; help:No; resizable:no; status:no;'
return window.showModalDialog(url, objIn, style)
},
Alert : '/modules/commons/images/alert.png',
Confirm : '/modules/commons/images/confirm.png',
Error : '/modules/commons/images/error.gif.png'
}
posted @ 2007-01-18 13:08
布尔 阅读(2630)
评论(16) 编辑 收藏