「jQuery Mobile」popupでポップアップウィンドウを定義する方法

2020年10月23日

説明
data-role="popup"はポップアップウィンドウを定義する属性です。
サンプルコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div data-role="page">
<div data-role="header">
<h1>A001/h1>
</div>
<div data-role="main" class="ui-content">
<a href="#cftPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">popup show</a>
<div data-role="popup" id="cftPopup">
<p>popu B002</p>
</div>
</div>
<div data-role="footer">
<h1>footer 001</h1>
</div>
</div>
<div data-role="page"> <div data-role="header"> <h1>A001/h1> </div> <div data-role="main" class="ui-content"> <a href="#cftPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">popup show</a> <div data-role="popup" id="cftPopup"> <p>popu B002</p> </div> </div> <div data-role="footer"> <h1>footer 001</h1> </div> </div>
<div data-role="page">
  <div data-role="header">
    <h1>A001/h1>
  </div>

  <div data-role="main" class="ui-content">
    <a href="#cftPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">popup show</a>
    
    <div data-role="popup" id="cftPopup">
      <p>popu B002</p>
    </div>
  </div>

  <div data-role="footer">
    <h1>footer 001</h1>
  </div>
</div>

 

jQuery Mobile

Posted by arkgame