纯js 三个按钮的模态对话框
原创
Confirm3ButtonModel.html:
<!--
三个按钮的模态对话框
added by duqiang.wang
使用说明:
场景1:
var result = window.showModalDialog("Confirm3ButtonModel.html",
"<table border='1px solid #ccc' ><tr><td>666</td></tr></table>,22,a,b,c", --第二个参数为逗号隔开的.第一个是正文内容(支持html或纯文本),第二个是对话框标题,三四五是分别三个按钮的名字
"dialogHeight:130px; dialogWidth:280px; status:no; help:no; scroll:no");
alert(result); --01 点了第一个按钮 , 02 第二个 , 03 第三个或点了关闭按钮
场景2:
var result = window.showModalDialog("Confirm3ButtonModel.html",
"<table border='1px solid #ccc' ><tr><td>666</td></tr></table>,22", --第二个参数为逗号隔开的.第一个是正文内容(支持html或纯文本),第二个是对话框标题,三个按钮用默认的 YES NO Cancel
"dialogHeight:130px; dialogWidth:280px; status:no; help:no; scroll:no");
alert(result); --01 点了第一个按钮 , 02 第二个 , 03 第三个或点了关闭按钮
-->
<script type="text/javascript">
var clickedThreeButton = false;
function F(str){
clickedThreeButton = true;
window.returnValue = str;
window.close();
}
window.onbeforeunload = onbeforeunload_handler; //监听关闭窗口的事件
function onbeforeunload_handler(){
if (clickedThreeButton == false){
//关闭窗口且没有按三个按钮 (即按了右上角关闭按钮) 则是cancel
window.returnValue = '03';
}
}
var params = null;
if (window.dialogArguments != ''){
params = window.dialogArguments.split(",")
}
</script>
<title>请选择</title><body style="background: menu" onload="init()">
<div id="content" style="margin-top: 15%; margin-left:5%">
内容
</div>
<div style="margin-top: 15%; margin-left:5%">
<input id="Button1" type="button" value="Yes" style="width:80px;height:25px" onclick="F('01');"/>
<input id="Button2" type="button" value="No" style="width:80px;height:25px" onclick="F('02');"/>
<input id="Button3" type="button" value="Cancel" style="width:80px;height:25px" onclick="F('03');" />
</div></body>
<script type="text/javascript">
function init(){
if (params != null ){
if(params.length == 2){
document.getElementById('content').innerHTML = params[0];
document.title = params[1];
} else if(params.length == 5){
document.getElementById('content').innerHTML = params[0];
document.title = params[1];
document.getElementById('Button1').value = params[2];
document.getElementById('Button2').value = params[3];
document.getElementById('Button3').value = params[4];
} else{
alert('参数错误,请查看本文件中的文档(Confirm3ButtonModel.html)');
}
}
}
</script>