html拖拽模态框,可拖拽的谷歌样式纯javascript模态窗口插件

draggable-google-modal是一款可拖拽的谷歌样式纯javascript模态窗口插件。该模态窗口插件使用纯js编写，模态窗口可以任意进行拖动，并且模态窗口可以全屏放大，或左右对齐占据半边屏幕。

使用方法

使用该模态窗口插件需要引入draggabilly.pkgd.js(用于拖拽)和modal.js文件。

HTML结构

模态窗口的基本HTML结构如下：

模态窗口标题

OK

模态窗口的内容...

可以使用一个按钮来触发模态窗口。

Open Modal

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该模态窗口插件。

window.onload = function(e){

Modal.init();

};

小技巧

你可以通过下面的一些快捷键来控制模态窗口的状态：

使用 Ctrl + 键盘方向键 ↑：可以使模态窗口填充满整个窗口。

使用 Ctrl + 键盘方向键 ↓：离开全屏模式。

使用 Ctrl + 键盘方向键 →：模态窗口左对齐，填充半边屏幕。

使用 Ctrl + 键盘方向键 ←：模态窗口右对齐，填充半边屏幕。

键盘ESC键退出模态窗口。