JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.htmlhifive.com/h5.css">
<script src="https://code.htmlhifive.com/ejs-h5mod.js"></script>
<script src="https://hifive.github.io/hifive-res/fw/current/h5.dev.js"></script>
<script src="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/popup/src/popup.js"></script>
<link rel="stylesheet" href="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/popup/src/popup.css">
<div class="sample-wrap">
  <label>メッセージ表示</label><br>
  <button class="top-popup">開く</button>
</div>

JavaScript

(function($) {
	var pageController = {
		__name: 'PageController',

		'button.top-popup click': function(context, $el) {
			var popup = h5.ui.popupManager.createPopup('sample', '位置指定ポップアップ', 'サンプルです');
			popup.setPosition('top');
			popup.setContentsSize(250, 50);
			popup.show();
		},
	};
	h5.core.expose(pageController);
})(jQuery);

$(function() {
	h5.core.controller('body', PageController);
});