简洁、大方的jquery弹出框，有遮罩层

最新推荐文章于 2020-07-01 16:56:09 发布

u011113967_zy

最新推荐文章于 2020-07-01 16:56:09 发布

阅读量315

点赞数

文章标签： html/jsp jquery 弹出框

本文链接：https://blog.csdn.net/u011113967/article/details/90256209

版权

利用jquery做的一个弹出框，可以自定义使用，底部遮罩，弹出与关闭均有动画效果，截图如下：
在这里插入图片描述
代码很少，如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="main.css">
<title>简洁、大方的jquery弹出框</title>
</head>
<body >
<button onclick="openTip()">点击弹出</button>
<div class="popbg" id="popbgTip"></div>
<div class="popbox_small" id="popboxTip">
		<h2>标题显示</h2>
    <p class="desc">是否确认退出？</p>
    <p class="oper"><a class="bg4" onclick="closeTip()">确认</a><a class="bg3" onclick="closeTip()">继续</a></p>
</div>
<script src="jquery.min.js"></script>
<script type="text/javascript">
function openTip(){
	$("#popbgTip").fadeIn();
	$("#popboxTip").fadeIn();
}
function closeTip(){
	$("#popbgTip").fadeOut();
	$("#popboxTip").fadeOut();
}
</script>
</body>
</html>

main.css的代码如下：

.popbg{ width:100%; height:100%; background-color:rgba(0,0,0,0.3); position:absolute; left:0; top:0; z-index:355; cursor:pointer; display:none;}
.popbox_small{ width:400px; height:200px; background-color:#fff; padding:5px 10px; position:absolute; left:50%; top:50%; margin-left:-180px; margin-top:-100px; z-index:356; display:none;}
.popbox_small h2{ border-bottom:1px solid #ddd; line-height:20px; color:#fe6c06; padding-left:20px; padding-bottom:5px; background-image:url(title_tip.png); background-repeat:no-repeat; font-weight:bold; font-size:16px;}
.popbox_small .desc{margin:20px 0; padding:0 20px; font-size:14px; color:#8f8d8d; line-height:28px; text-align: center;}
.popbox_small .oper{font-size:14px;text-align: center;}
.popbox_small .oper a{ display:inline-block; height:38px; line-height:38px; color:#fff; text-align:center; width:96px; border-radius:3px; margin:0 10px; font-size:15px; cursor:pointer;}
.popbox_small .oper a.bg3{ background-color:#0485fd;}
.popbox_small .oper a.bg3:hover{ background-color:#5db0fc;}
.popbox_small .oper a.bg4{ background-color:#c0c0c0;}
.popbox_small .oper a.bg4:hover{ background-color:#e9e9e9;}

使用的jquery可自行下载！
使用的标题小图片如下：
在这里插入图片描述

u011113967_zy

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
简洁、大方的jquery弹出框，有遮罩层

利用jquery做的一个弹出框，可以自定义使用，底部遮罩，弹出与关闭均有动画效果，截图如下：代码很少，如下：<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="stylesheet" href="main.css"&g...
复制链接

扫一扫