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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!