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模态窗口插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。