ポップアップ/モーダル表示を行うポップアップライブラリの紹介（その5）「モーダル表示（表示位置調整）」
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 メソッドを実行します。
setPosition を実行する際に、2つ目の引数で指定する点がポイントです。今回は top: 30 としていますので、上から30px下に表示されます。
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.top-popup click': function(context, $el) { | |
| var popup = h5.ui.popupManager.createPopup('sample', '位置指定ポップアップ', 'サンプルです'); | |
| popup.setPosition(null, { | |
| top: 30 | |
| }); | |
| popup.setContentsSize(250, 50); | |
| popup.show(); | |
| }, | |
| }; | |
| h5.core.expose(pageController); | |
| })(jQuery); | |
| $(function() { | |
| h5.core.controller('body', PageController); | |
| }); |
実際に動いているデモはこちらにあります。JavaScript標準のアラートに比べて表示のカスタマイズや細かなハンドリングができますのでぜひお使いください。
hifive開発者ブログ 
コメントは受け付けていません。