ポップアップ/モーダル表示を行うポップアップライブラリの紹介（その3）「モーダル表示（ドラッグ）」
hifiveはフレームワークですが、業務システムでよく使われるUIについてはライブラリとして提供しています。今回は操作中によく表示されるポップアップ、モーダル表示を行うポップアップライブラリを紹介します。
今回は表示したモーダルをドラッグで動かせるようにする方法を紹介します。実際に動いているデモはこちらにあります。アニメーションは次のようになります。
使い方
まずpopup.jsとpopup.cssを読み込みます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
次にHTMLを次のように記述します。ボタンを押したらポップアップが表示されます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="sample-wrap"> | |
| <label>メッセージ表示</label><br> | |
| <button class="draggable-popup">開く</button> | |
| </div> |
JavaScriptの実装は次のようになります。ボタンをクリックされた時のイベントで、 h5.ui.popupManager.createPopup を実行します。タイトル、本文を指定して、最後に show() を実行すれば表示されます。この時、 draggable: true オプションを追加するのがポイントです。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function($) { | |
| var pageController = { | |
| __name: 'PageController', | |
| 'button.draggable-popup click': function(context, $el) { | |
| h5.ui.popupManager.createPopup('sample', 'ドラッグ可能ポップアップ', 'サンプルです', null, { | |
| draggable: true | |
| }).show(); | |
| }, | |
| }; | |
| h5.core.expose(pageController); | |
| })(jQuery); | |
| $(function() { | |
| h5.core.controller('body', PageController); | |
| }); |
実際に動いているデモはこちらにあります。JavaScript標準のアラートに比べて表示のカスタマイズや細かなハンドリングができますのでぜひお使いください。
ポップアップ
hifive開発者ブログ 
コメントは受け付けていません。