ポップアップ/モーダル表示を行うポップアップライブラリの紹介（その4）「モーダル表示（画面最上部に表示）」
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="top-popup">開く</button> | |
| </div> |
JavaScriptの実装は次のようになります。ボタンをクリックされた時のイベントで、 h5.ui.popupManager.createPopup を実行します。タイトル、本文を指定します。その後、 setPosition メソッドで表示場所の指定を行い、さらに setContentsSize を使ってポップアップのサイズを指定します。最後に show メソッドを実行します。
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開発者ブログ 
コメントは受け付けていません。