ポップアップ/モーダル表示を行うポップアップライブラリの紹介（その6）「モーダルの連続表示」

by moongift : 2017/06/30

hifiveはフレームワークですが、業務システムでよく使われるUIについてはライブラリとして提供しています。今回は操作中によく表示されるポップアップ、モーダル表示を行うポップアップライブラリを紹介します。

今回はモーダルを複数回表示する方法を紹介します。実際に動いているデモはこちらにあります。アニメーションは次のようになります。

使い方

まずpopup.jsとpopup.cssを読み込みます。

	<link href="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/popup/src/popup.css" />
	<script src="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/popup/src/popup.js"></script>

view raw

index.html

hosted with ❤ by GitHub

次に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>

view raw

index.js

hosted with ❤ by GitHub

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);
	});

view raw

index.html

hosted with ❤ by GitHub

この処理では 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);

view raw

index.js

hosted with ❤ by GitHub

最後にポップアップ内のイベントハンドリング処理です。

	(function($) {
	var popupController = {
	__name: 'PopupController',

	'.modal click': function() {
	sample.showPopup(true);
	},
	'.modeless click': function() {
	sample.showPopup(false);
	}
	};
	h5.core.expose(popupController);
	})(jQuery);

view raw

index.js

hosted with ❤ by GitHub

実際に動いているデモはこちらにあります。JavaScript標準のアラートに比べて表示のカスタマイズや細かなハンドリングができますのでぜひお使いください。

From → hifive

コメントは受け付けていません。