原创力文档- 1、本文档共4页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
jquery CSS3 遮罩弹出层动画效果，使用非常简单，就两个标签，里面自定义内容和样
式，四种常见效果，懂的朋友还可以修改源代码修改成自己想要的效果
关键代码如下所示：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta
name="viewport" content="width=device-width, initial-scale=1" />
<title>JQuery-CSS3 制作简洁的弹框 _ 何问起 </title>
<script type="text/javascript"
src="/jquery/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" href="/texiao/jquery/85/style.css">
<style>.hovertreeinfo{text-align:center;}.hovertreeinfo a{color:blue}</style>
</head>
<body>
<div class="hovertreeinfo"><h2>jquery CSS3 制 作 简 洁 遮 罩 弹 出 层 动 画
</h2>
几种常见的简洁弹框 </div>
<div class="checkbox">
<a href="javascript:0;" class="cd-popup-trigger0"> 样式 1</a>
<a href="javascript:0;" class="cd-popup-trigger1"> 样式 2</a>
<a href="javascript:0;" class="cd-popup-trigger2"> 样式 3</a>
<a href="javascript:0;" class="cd-popup-trigger3"> 样式 4</a>
</div>
<!-- 弹框 -->
<div class="cd-popup">
<div class="cd-popup-container">
<p> 何问起 </p>
<div class="cd-buttons">
自定义整体容器宽高度及内容，高度可自适应可固定 ,样式可以定义自己喜欢的样式，
这里就不做美观了
</div>
<a href="javascript:;" class="cd-popup-close">close</a>
</div>
</div>
<div class="cd-popup1">
<div class="cd-popup-container1">
<p> 何问起 </p>
<div class="cd-buttons">
自定义整体容器宽高度及内容，高度可自适应可固定 ,样式可以定义自己喜欢的样式，
文档评论（0）