「jQuery Mobile」data-position-toでpopupが基準要素に開くサンプル

2020年8月18日

構文
<a href="#popupCfg" data-rel="popup" data-position-to="#cft">Open Popup</a>
<div id="cft">hhh</div>

サンプルコード

<div data-role="main" class="ui-content">
  <a href="#cftPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all" data-position-to="window">Pop-up window display</a>
  <a href="#myPopup2" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all" data-position-to="#demo">Pop-up window is displayed on the id="demo" element</a>
  <a href="#myPopup3" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all" data-position-to="origin">Default Display</a>
   
  <div data-role="popup" id="cftPopup" class="ui-content">
    <p>Display it in the middle of the window.</p>
  </div>
  <div data-role="popup" id="myPopup2" class="ui-content">
    <p>Display it on the element with id="demo".</p>
  </div>
  <div data-role="popup" id="myPopup3" class="ui-content">
    <p>Displayed on the button clicked</p>
  </div>
  
</div>