jQuery实现弹出带遮罩层的居中浮动窗口效果
(编辑：jimmy 日期: 2024/11/19 浏览：3 次 )
本文实例讲述了jQuery实现弹出带遮罩层的居中浮动窗口效果。分享给大家供大家参考，具体如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pop window</title>
<style>
*{
padding: 0;
margin: 0;
}
.hide{
display: none;
}
.popWindow{
width: 300px;
height: 300px;
background: #abcdef;
padding: 2px;
margin: 10px;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.popWindow h3{
height: 30px;
line-height: 30px;
}
.popWindow h3 span{
float: right;
font-size: 14px;
font-weight: normal;
cursor: pointer;
}
.popWindow h3 span:hover{
color: #f00;
}
.popWindow .content{
height: 270px;
background: #fff;
}
.mask{
background: #000;
opacity: 0.4;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
</style>
</head>
<body style="width:2000px">
<a href="javascript:;" id="show">显示窗口</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="popWindow hide">
<h3>弹出窗口的标题<span>关闭</span></h3>
<div class="content">弹出窗口的内容</div>
</div>
<script src="/UploadFiles/2021-04-02/jquery-1.7.2.min.js">
运行效果图如下：
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
下一篇：jQuery实现的无限级下拉菜单功能示例