对话框/Tips
popup - 交互式3D弹出窗口插件
PetitQ
popup.js 是一款使用 jQuery 和 CSS3 制作并可以使用鼠标进行互动的 3D 弹出窗口插件。该 3D 弹出窗口插件使用简单，并且在旧的浏览器中会回退为非 3D 状态，兼容 IE8+的所有现代浏览器。
使用方法：
也想出现在这里？联系我们吧
使用该 3D 弹出窗口插件需要在页面中引入 popup.css，jquery 和 popup.js 文件。
<link rel="stylesheet" href="css/popup.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
HTML 结构：
首先需要创建一个用于触发弹出窗口的按钮或超链接元素。
<a id="click" rel="popup_name" href="#">Show popup</a>
然后你可以定义你的弹出窗口要显示的内容。
<div class="popup">
<div id="popup_name" class="popup_block">
<div class="popup_head">
<!-- Content -->
</div>
<div class="popup_body">
<!-- Content -->
</div>
</div>
</div>
注意超链接中的 rel 属性指向的是弹出窗口内容的 ID。
初始化插件：
在页面 DOM 元素加载完毕之后，可以通过下面的方法来初始化该 3D 弹出窗口插件。
$(document).ready(function() {
$("#click").click(popup);
});
如果你需要修改弹出对话框的背景颜色，可以通过修改 popup_head 的 background-color 和"popup_block 的 border-color 来实现。
popup.js 插件的 github 地址为:https://github.com/lacrm/3D-Popup-jQuery-Plugin
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
