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

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键退出模态窗口。