加强的alert confirm js自定义对话框 多个按钮 ICO自定义
效果图：
<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'
}
<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(){
Event.observe(window, 'load', //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'}
