ポップアップ/モーダル表示を行うポップアップライブラリの紹介（その4）「モーダル表示（画面最上部に表示）」
hifiveはフレームワークですが、業務システムでよく使われるUIについてはライブラリとして提供しています。今回は操作中によく表示されるポップアップ、モーダル表示を行うポップアップライブラリを紹介します。
今回は画面の最上部に表示する方法を紹介します。実際に動いているデモはこちらにあります。アニメーションは次のようになります。
使い方
まずpopup.jsとpopup.cssを読み込みます。
次にHTMLを次のように記述します。ボタンを押したらポップアップが表示されます。
| <div class="sample-wrap"> | |
| <label>メッセージ表示</label><br> | |
| <button class="top-popup">開く</button> | |
| </div> |
JavaScriptの実装は次のようになります。ボタンをクリックされた時のイベントで、 h5.ui.popupManager.createPopup を実行します。タイトル、本文を指定します。その後、 setPosition メソッドで表示場所の指定を行い、さらに setContentsSize を使ってポップアップのサイズを指定します。最後に show メソッドを実行します。
| (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標準のアラートに比べて表示のカスタマイズや細かなハンドリングができますのでぜひお使いください。
コメントは受け付けていません。