JQM 팝업 샘플이 작동하지 않습니다.

Question

팝업을 배우려 고 시도해도 JQM 팝업 "대화 상자"샘플이 작동하지 않습니다. "페이지 삭제 ..."버튼을 누르면 아무 것도 나타나지 않습니다. 내 HTML 본문은 다음과 같습니다 당신이 볼 수 있듯이

<div data-role="page" id="page_test1" data-theme="b"> 

<div data-role="content"> 
    <a href="#popupDialog" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="pop" data-icon="delete" data-theme="b">Delete page...</a> 
    </div> <!-- /content --> 
</div> <!-- /page --> 

<!-- Exactly copied from http://view.jquerymobile.com/1.3.1/dist/demos/widgets/popup/ (sample "Dialog") --> 
<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all"> 
    <div data-role="header" data-theme="a" class="ui-corner-top"> 
     <h1>Delete Page?</h1> 
    </div> 

    <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content"> 
     <h3 class="ui-title">Are you sure you want to delete this page?</h3> 
     <p>This action cannot be undone.</p> 
     <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Cancel</a> 
     <a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">Delete</a> 
    </div> <!-- content --> 
</div> <!-- popup --> 

는, HTML의 내 부분이 조금 있습니다. 당신은 팝업의 그런 행동을 여기에서 찾아 낼 수있다 - http://jsfiddle.net/vbulash/YkEAj/

Answer 1

팝업은 data-role="page" 콘테이너 안쪽에 있어야한다.

<div data-role="page" id="page_test1" data-theme="b"> 
    <div data-role="content"> <a href="#popupDialog" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="pop" data-icon="delete" data-theme="b">Delete page...</a> 

    </div> 
    <!-- /content --> 
    <!-- Exactly copied from http://view.jquerymobile.com/1.3.1/dist/demos/widgets/popup/ (sample "Dialog") --> 
    <div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all"> 
     <div data-role="header" data-theme="a" class="ui-corner-top"> 
       <h1>Delete Page?</h1> 

     </div> 
     <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content"> 
       <h3 class="ui-title">Are you sure you want to delete this page?</h3> 

      <p>This action cannot be undone.</p> <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Cancel</a> 
    <a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">Delete</a> 

     </div> 
     <!-- content --> 
    </div> 
    <!-- popup --> 
</div> 
<!-- /page --> 

http://jsfiddle.net/YkEAj/1/