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