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="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

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

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