當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
html拖拽模态框,可拖拽的谷歌样式纯javascript模态窗口插件
生活随笔
收集整理的這篇文章主要介紹了
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鍵退出模態窗口。
總結
以上是生活随笔為你收集整理的html拖拽模态框,可拖拽的谷歌样式纯javascript模态窗口插件的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Linux使用vi/vim打开文档/文件
- 下一篇: html5 svg 拖拽,SVG拖动