对话框/Tips
可拖拽谷歌样式窗口插件
PetitQ
draggable-google-modal 是一款可拖拽的谷歌样式纯 javascript 模态窗口插件。该模态窗口插件使用纯 js 编写，模态窗口可以任意进行拖动，并且模态窗口可以全屏放大，或左右对齐占据半边屏幕。
使用方法：
使用该模态窗口插件需要引入 draggabilly.pkgd.js（用于拖拽）和 modal.js 文件。
也想出现在这里？联系我们吧
<script src="js/draggabilly.pkgd.js"></script>
<script src="js/modal.js"></script>
HTML结构：
模态窗口的基本 HTML 结构如下：
<div class="modal">
<header class="modal-header">
<h1 class="modal-header-title left">模态窗口标题</h1>
<button class="modal-header-btn right modal-close" title="Close Modal">OK</button>
</header>
<div class="modal-body">
<section class="modal-content">
模态窗口的内容...</section>
</div>
</div>
可以使用一个按钮来触发模态窗口。
<button class="modal-header-btn modal-trigger btn-fixed">Open Modal</button>
初始化插件：
在页面 DOM 元素加载完毕之后，可以通过下面的方法来初始化该模态窗口插件。
window.onload = function(e){
Modal.init();
};
小技巧：
你可以通过下面的一些快捷键来控制模态窗口的状态：
使用 Ctrl + 键盘方向键 ↑：可以使模态窗口填充满整个窗口
使用 Ctrl + 键盘方向键 ↓：离开全屏模式
使用 Ctrl + 键盘方向键 →：模态窗口左对齐，填充半边屏幕
使用 Ctrl + 键盘方向键 ←：模态窗口右对齐，填充半边屏幕
键盘 ESC 键退出模态窗口
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
