前端简单提示框（弹出模态框）源代码分享

最新推荐文章于 2025-07-30 18:00:56 发布

HaleyTiger

最新推荐文章于 2025-07-30 18:00:56 发布

阅读量1.6w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： JavaScript jQuery Html

本文链接：https://blog.youkuaiyun.com/hu1010037197/article/details/80793712

JavaScript 同时被 3 个专栏收录

20 篇文章

订阅专栏

jQuery

8 篇文章

订阅专栏

Html

5 篇文章

订阅专栏

如下图，单击左上角X按钮，弹出如下提示框，方便以后练习使用。

这里写图片描述

###一、tip.html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>提示框测试</title>
		<link type="text/css" rel="stylesheet" href="css/style.css" />
		<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
	</head>
	<body>
		
		
		<!-- 简单测试提示框 -->
	<span>
		<a class="delete" href="javascript:void(0);" userid="123" username="张">
			<img src="img/schu.png" alt="删除" title="删除" />
		</a>
	</span>


		<!--点击删除按钮后弹出的页面-->
		<div class="zhezhao"></div>
		<div class="remove" id="removeUse">
			<div class="removerChid">
				<h2>提示</h2>
				<div class="removeMain">
					<p>你确定要删除该用户吗？</p>
					<a href="#" id="yes">确定</a> <a href="#" id="no">取消</a>
				</div>
			</div>
		</div>
	
		
		<script type="text/javascript" src="js/tip.js"></script>
			
		
		
	</body>
</html>

###二、tip.js代码

var obj = null;

$(function(){
	// 点击"删除"按钮触发
	$(".delete").on("click",function(){
		obj = $(this);
		changeDLGContent("你确定要删除用户【"+obj.attr("username")+"】吗？");
		openYesOrNoDLG();
	});
	// 点击提示框中的"取消"按钮触发
	$('#no').click(function () {
		$('.zhezhao').css('display', 'none');
		$('#removeUse').fadeOut();
	});
	// 点击提示框中的"确定"按钮触发
	$('#yes').click(function () {
		deleteExecute(obj);
	});
});

//发送ajax请求删除内容
function deleteExecute(obj){
	$.ajax({
		type:"GET",
		url:path+"/delete/delUser",
		data:{
			id:obj.attr("userid")
		},
		dataType:"json",
		success:function(data){
			// 一些提示信息
			changeDLGContent("对不起，删除用户【"+obj.attr("username")+"】失败");
		},
		error:function(data){
			//一些错误提示信息
			changeDLGContent("对不起，删除失败");
		}
	});
}

// 显示提示框
function openYesOrNoDLG(){
	$('.zhezhao').css('display', 'block');
	$('#removeUse').fadeIn();
}

// 改变提示内容
function changeDLGContent(contentStr){
	var p = $(".removeMain").find("p");
	p.html(contentStr);
}

###三、style.css代码

* {
	margin: 0;
	padding: 0;
}

/*点击删除按钮后弹出的层*/
.zhezhao {
	display: none; /* 修改这里可以让遮罩层消失*/
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.7;
	filter: alpha(opacity = 70);
	overflow: hidden;
}

.remove {
	display: none; /* 修改这里可以让删除框消失*/
	width: 400px;
	height: 190px;
	position: absolute;
	top: 200px;
	left: 500px;
	background: #fff;
	border-radius: 4px;
}

.removerChid {
	margin: 4px;
	border: 1px solid #ccc;
}

.removerChid h2 {
	padding-left: 8px;
	font-size: 14px;
	line-height: 30px;
	margin: 4px 8px;
	border-bottom: 1px solid #99cc33;
}

.removeMain {
	margin-top: 38px;
	text-align: center;
	margin-bottom: 30px;
	border-radius: 4px;
}

.removeMain a {
	padding: 0 20px;
	display: inline-block;
	height: 30px;
	line-height: 30px;
	border-radius: 4px;
	border: 1px solid #5e8809;
	margin-top: 30px;
	background: #99cc33;
	color: #fff;
	text-decoration: none;
}

.removeMain a:hover,.removeMain a:active {
	background: #679016;
}