コンテンツへスキップ

ポップアップ/モーダル表示を行うポップアップライブラリの紹介(その3)「モーダル表示(ドラッグ)」

by : 2017/06/27

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

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

使い方

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

次にHTMLを次のように記述します。ボタンを押したらポップアップが表示されます。

<div class="sample-wrap">
<label>メッセージ表示</label><br>
<button class="draggable-popup">開く</button>
</div>

view raw
index.js
hosted with ❤ by GitHub

JavaScriptの実装は次のようになります。ボタンをクリックされた時のイベントで、 h5.ui.popupManager.createPopup を実行します。タイトル、本文を指定して、最後に show() を実行すれば表示されます。この時、 draggable: true オプションを追加するのがポイントです。

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

view raw
index.html
hosted with ❤ by GitHub

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

ポップアップ

From → hifive

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

%d人のブロガーが「いいね」をつけました。