ポップアップ/モーダル表示を行うポップアップライブラリの紹介（その6）「モーダルの連続表示」
hifiveはフレームワークですが、業務システムでよく使われるUIについてはライブラリとして提供しています。今回は操作中によく表示されるポップアップ、モーダル表示を行うポップアップライブラリを紹介します。
今回はモーダルを複数回表示する方法を紹介します。実際に動いているデモはこちらにあります。アニメーションは次のようになります。
使い方
まずpopup.jsとpopup.cssを読み込みます。
次にHTMLを次のように記述します。ボタンを押したらポップアップが表示されます。さらに表示されたダイアログにもイベントがあるので、ejsでテンプレートを定義しておきます。
| <div class="sample-wrap"> | |
| <label>メッセージ表示</label><br> | |
| <button class="draggable-popup">開く</button> | |
| </div> | |
| <script type="text/ejs" id="multi-popup"> | |
| <div>[%= modal ? 'modal' : 'modeless' %]なポップアップです</div> | |
| <br> | |
| <div> | |
| <button class="modal">modalで開く</button> | |
| <button class="modeless">modelessで開く</button> | |
| </div> | |
| </script> |
JavaScriptの実装は次のようになります。全部で3つに分かれています。まず一番最初のポップアップを表示する処理です。
| (function($) { | |
| var pageController = { | |
| __name: 'PageController', | |
| 'button.draggable-popup click': function(context, $el) { | |
| sample.showPopup(true); | |
| }, | |
| }; | |
| h5.core.expose(pageController); | |
| })(jQuery); | |
| $(function() { | |
| h5.core.controller('body', PageController); | |
| }); |
この処理では sample.showPopup を実行しています。この処理は次のようになります。表示したポップアップの数を記録しておいて、それによって表示位置をずらしています。
| (function($) { | |
| var count = 0; | |
| h5.u.obj.expose('sample', { | |
| showPopup: function(modal) { | |
| var content = h5.core.view.get('multi-popup', { | |
| modal: modal | |
| }); | |
| var popup = h5.ui.popupManager.createPopup('sample' + count, '複数階層ポップアップ' + count, content, PopupController, { | |
| draggable: true | |
| }); | |
| count++; | |
| popup.setContentsSize(250, 100); | |
| popup.show({ | |
| overlay: modal | |
| }); | |
| popup.setPosition(null, { | |
| top: count * 50, | |
| left: count * 50 | |
| }); | |
| return popup; | |
| } | |
| }); | |
| })(jQuery); |
最後にポップアップ内のイベントハンドリング処理です。
| (function($) { | |
| var popupController = { | |
| __name: 'PopupController', | |
| '.modal click': function() { | |
| sample.showPopup(true); | |
| }, | |
| '.modeless click': function() { | |
| sample.showPopup(false); | |
| } | |
| }; | |
| h5.core.expose(popupController); | |
| })(jQuery); |
実際に動いているデモはこちらにあります。JavaScript標準のアラートに比べて表示のカスタマイズや細かなハンドリングができますのでぜひお使いください。
コメントは受け付けていません。