ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Webでよく使われるモーダルウィンドウは閉じたり入力しないと次のアクションに進めないのでユーザに処理を強制するのに便利です。しかしモーダルは動かすこともできないのでモーダルの裏に参考したい情報があった時にとてもストレスを感じます。

そこでGoogleではドラッグできるモーダルウィンドウを提供しています。同じような実装を実現できるのがDraggable Google Modalです。

Draggable Google Modalの使い方

実際にモーダルを表示しているところです。

ドラッグして移動できます。

動かしているところをアニメーションでどうぞ。

Draggable Google Modalはモーダルウィンドウを動かせるようにしただけですが、ユーザのストレスは大幅に減るのではないでしょうか。背景をぼかすのではなく、若干薄くするだけであれば背後の情報を確認するのも容易になるでしょう。ユーザビリティを高めるために使ってみたいライブラリです。

Draggable Google ModalはHTML5/JavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

dolce/draggable-google-modal: Simple draggable modal with pure Javascript, inspired by Google Modal.

 

MOONGIFTの関連記事

コメント

  • MOONGIFTプレミアム
  • Mobile Touch