popup.js-jQuery和CSS3可互动的3D弹出窗口插件

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