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
键退出模态窗口。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!