ポップアップ/モーダル表示を行うポップアップライブラリの紹介(その6)「モーダルの連続表示」
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を次のように記述します。ボタンを押したらポップアップが表示されます。さらに表示されたダイアログにもイベントがあるので、ejsでテンプレートを定義しておきます。
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> | |
<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つに分かれています。まず一番最初のポップアップを表示する処理です。
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) { | |
sample.showPopup(true); | |
}, | |
}; | |
h5.core.expose(pageController); | |
})(jQuery); | |
$(function() { | |
h5.core.controller('body', PageController); | |
}); |
この処理では sample.showPopup を実行しています。この処理は次のようになります。表示したポップアップの数を記録しておいて、それによって表示位置をずらしています。
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 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); |
最後にポップアップ内のイベントハンドリング処理です。
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 popupController = { | |
__name: 'PopupController', | |
'.modal click': function() { | |
sample.showPopup(true); | |
}, | |
'.modeless click': function() { | |
sample.showPopup(false); | |
} | |
}; | |
h5.core.expose(popupController); | |
})(jQuery); |
実際に動いているデモはこちらにあります。JavaScript標準のアラートに比べて表示のカスタマイズや細かなハンドリングができますのでぜひお使いください。
コメントは受け付けていません。