自己写弹窗调用

两个人的幸福online

已于 2022-09-01 17:44:09 修改

阅读量310

点赞数

分类专栏： html 文章标签： css css3 javascript

于 2018-11-22 10:43:02 首次发布

本文链接：https://blog.csdn.net/weixin_42249565/article/details/84335270

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

看下面代码就行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
		<title></title>
	</head>
	<style>
		#toast{z-index:99;position:fixed;background:rgba(0,0,0,0.5);top:0}#toast .box{width:420px;background:white;border-radius:3px;margin:0 auto}#toast .title{font:20px/2 "Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","WenQuanYi Micro Hei",sans-serif;margin:15px 15px 0 15px;border-bottom:1px dashed #21b384}#toast .text{font-family:"Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","WenQuanYi Micro Hei",sans-serif;margin:0;padding:15px;text-indent:15px;line-height:1.5}#toast button{width:100px;height:30px;background:#aaa;border:0;margin:15px 8px;color:white;float:right;cursor:pointer}#popup{width:280px;z-index:98;position:fixed;background:#ffffff;top:50%;left:50%;padding:8px 10px;border-radius:3px;border:1px solid #f1f1f1;box-shadow:0 0 2px #aaaaaa;margin-top:-100px;margin-left:-200px;}
	</style>
	<body>
		<button id="lizhi" type="button">点击</button>

		<div id="toast" style="display: none;">
			<div class="box">
				<div class="title"></div>
				<p class="text"></p>
				<button class="quxiao button">取消</button>
				<button class="queding button" style="background: #21B384;">确定</button>
				<div style="clear: both;"></div>
			</div>
		</div>
		<div id="popup" style="display: none;"></div>
	</body>
</html>


<script type="text/javascript">
function toast(color = 'green', title = '提示', text,type=1, i, time = 2000) {
	$("#toast").css("height", $(window).height());
	$("#toast").css("width", $(window).width());
	$("#toast .box").css("margin-top", ($(window).height() - $(".box").outerHeight()) / 2 - 50);
	$("#toast .title").text(title).css('color', color).css('border-color', color);
	$("#toast .queding").css('background', color);
	if(type==1){
		$("#toast").fadeIn();
		$("#toast .text").text(text);
		$('#toast .quxiao').one('click',function() {
			$("#toast").fadeOut();
			return i(0);
		});
		$('#toast .queding').one('click',function() {
			$("#toast").fadeOut();
			return i(1);
		});
	}else if(type==2){
		$("#popup").text(text);
		$("#popup").fadeIn();
		setTimeout(function(){
			$("#popup").fadeOut();
		},time);
	}
}











	$('#lizhi').click(function() {
		//参数,	颜色,	标题, 内容 类型, 函数,
		toast('red', '标题', '我是内容', 1, function(data) {
			console.log(data);
			if (data) {
				alert(88);
			}
		});
	});
</script>