0

ポップアップを学習しようとすると、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/

4

1 に答える 1

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/

于 2013-04-22T07:13:47.333 に答える