javascript自定义弹出的确认框Confirm

最新推荐文章于 2024-05-14 10:47:32 发布

zhaoqhu

最新推荐文章于 2024-05-14 10:47:32 发布

阅读量4.5k

点赞数 3

分类专栏： HTML&CSS&Javascript

本文链接：https://blog.csdn.net/u011504963/article/details/109672409

版权

HTML&CSS&Javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

使用场景

如果想自定义浏览器自带的弹出框Confirm样式，可以参考下面的代码

关键词

自定义Confirm
自定义确认框

知识点

异步函数(async function)
async
await
Promise
resolve

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
			.modal-backdrop{
				width: 100vw;
				height: 100vh;
				background: #000;
				opacity: 0.5;
				position: fixed;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				z-index: 100;
			}
			.async-popup-confirm-dialog-wrapper{
				margin: 0 auto;
				height: 100vh;
				max-width: 500px;
				display: flex;
				align-items: center;
			}
			.async-popup-confirm-dialog{
				width: 100%;
				height: 100%;
				max-height: 100px;
				background: #fff;
				position: relative;
				z-index: 1000;
			}
			.confirm-dialog-handle{
				text-align: center;
			}
			.confirm-dialog-handle a{
				margin-right: 10px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<a href="javascript:;" onclick="asyncPopUpConfimDialog()">async click</a>
			<div class="modal-backdrop" style="display:none;"></div>
			<div class="async-popup-confirm-dialog-wrapper">
				<div class="async-popup-confirm-dialog" id="asyncPopUpConfimDialog" style="display:none;">
					<div class="confirm-dialog-tips">
						Are you sure you want to do this? 
					</div>
					<div class="confirm-dialog-handle">
						<a href="javascript:;" id="aYes">a yes</a>
						<a href="javascript:;" id="aNo">a no</a>
					</div>
				</div>
			</div>
			
		</div>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
	async function asyncPopUpConfimDialog(){
		$("#asyncPopUpConfimDialog,.modal-backdrop").show();
		var res = await aYesOrNoClick();
		console.log('asyncAClick res:',res);
		if(res){
			alert('a yes click');
		}else{
			alert('a no click');
		}
		$("#asyncPopUpConfimDialog,.modal-backdrop").hide();
	}
	function aYesOrNoClick(){
		return new Promise(resolve=>{
			$("#aYes").click(function(){
				resolve(true);
			});
			$("#aNo").click(function(){
				resolve(false);
			});
			//
		});
	}
	</script>
</html>

Demo link

zhaoqhu

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
javascript自定义弹出的确认框Confirm

使用场景如果想自定义浏览器自带的弹出框样式，可以参考下面的代码知识点异步函数(async function)asyncawaitPromiseresolve<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <tit
复制链接

扫一扫