对话框/Tips
Drop - 实用JavaScript下拉弹出层插件
PetitQ
Drop.js 是一款 JavaScript 和 CSS 实用下拉弹出层插件。该插件基于 Tether.js 来定位弹出层，可以制作多种弹出层效果。该插件基于 Tether.js 来定位弹出层，可以制作多种弹出层效果。它的特点还有：
弹出层会在页面尺寸改变和滚动时自动更新位置
也想出现在这里？联系我们吧
弹出层在页面滚动时使用 GPU 加速来定位
弹出层之间可以进行嵌套
弹出层可以在元素的 12 个位置上显示
可以自定义是在点击元素、鼠标滑过元素或元素聚焦时显示弹出层
使用方法:
由于该弹出层插件依赖于 tether.js 插件，使用该弹出层插件需要在页面中引入 tether.min.js、drop.min.js 和 drop-theme-arrows.css 文件。
<link rel="stylesheet" href="drop-theme-arrows.css" />
<script src="tether.min.js"></script>
<script src="drop.min.js"></script>
初始化插件:
要初始化一个 drop，需要实例化一个 Drop 对象。
drop = new Drop({
target: document.querySelector('.drop-target'),
content: 'Welcome to the future!',
position: 'bottom left',
openOn: 'click'
});
你也可以通过自定义“上下文”来创建 Drops，在“上下文”中你可以指定弹出层的 CSS 前缀字符串，默认的前缀是 drop。
MyDropContext = Drop.createContext({
classPrefix: 'my-drop'
});
drop = new MyDropContext({
target: document.querySelector('.my-drop-target'),
content: 'Welcome to my new Drop context!'
});
在上面的实例化代码中，所有弹出层会通过 my-drop-open 和 my-drop-content 来进行渲染，而不是 drop-open 和 drop-content。另外，所有通过 data-drop 来设置的属性现在都会被替换为通过 data-my-drop 来设置。
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
