纯js 三个按钮的模态对话框

最新推荐文章于 2025-05-08 09:11:19 发布

wangduqiang747

最新推荐文章于 2025-05-08 09:11:19 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前台

本文链接：https://blog.youkuaiyun.com/wangduqiang747/article/details/106688688

前台专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用纯JavaScript实现的三个按钮模态对话框，适用于网页应用中需要用户确认或选择的场景。对话框支持自定义内容、标题及按钮名称，通过showModalDialog函数调用，返回用户点击的按钮序号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

纯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>