对话框/Tips
vintage-popup 模态窗口jQuery插件
PetitQ
使用方法
在页面中直接引入。
也想出现在这里？联系我们吧
HTML 结构
一个模态窗口的基本 HTML 结构如下：
<!-- Button which triggers modal -->
<button type="button" data-popup-target="example">
Default popup</button>
<!-- Popup -->
<div class="popup" data-popup-id="example" tabindex="-1" role="dialog">
<div class="popup__container">
<div class="popup__close"><span></span><span></span></div>
<div class="popup__content">
<div class="popup__title">Popup title</div>
<div class="popup__body">Popup body</div>
</div>
</div>
</div>
使用远程异步数据：
<!-- Button that triggers modal -->
<button type="button" data-popup-target="exampleRemote" data-popup-remote="/path/example.json">
Remote popup
</button>
<!-- Popup -->
<div class="popup" data-popup-id="exampleRemote" tabindex="-1" role="dialog">
<div class="popup__container">
<div class="popup__close"><span></span><span></span></div>
<div class="popup__content"></div>
</div>
</div>
example.json
{"replaces": [
{"what": "[data-popup-id='exampleRemote'] .popup__content",
"data": "<div class="popup__content"><div class="popup__title">Popup title</div><div class="popup__body">Popup body</div></div>"
}]}
初始化插件
// initialize popup$('button').popup();
// initialize with options$('button').popup({
closeOnEsc: false
});
在 webpack 中使用：
// import popup moduleimport Popup from 'vintage-popup';
// fix jQuery conflict (once)Popup.expose($);
// use it!$('button').popup();
该 jQuery 模态窗口插件的配置参数请参考：https://github.com/Inspired-by-Boredom/vintage-popup#options
Github 网址：https://github.com/Inspired-by-Boredom/vintage-popup
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
