2

jQuery Mobile を使用してポップアップを表示しようとしていますが、ポップアップのスタイルに問題があります。HTML マークアップは次のようになります。

<div data-role="popup" id="confirmDialog" data-overlay-theme="a" data-theme="c" 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>
    </div>

(ところで、このコードは jQuery Mobile サイトからコピーされたものです)。

.popup('open') メソッドを使用してポップアップを開くと、ヘッダー (ページを削除しますか?) とボタンのスタイルが設定されません。ヘッダーは通常のテキストとして表示され、ボタンは通常のリンクとして表示されます。

この動作の原因は何ですか?

ありがとう！

4

2 に答える 2

2

HTML にエラーがある可能性があります。

コードの実際の例を次に示します: http://jsfiddle.net/Gajotres/EtDZc/

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
  <meta name="viewport" content="width=device-width"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</a>
        </div>

        <div data-role="content">
            <a href="#" data-role="button" id="test-button">Test popup</a>
            <div data-role="popup" id="confirmDialog" data-overlay-theme="a" data-theme="c" 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>
            </div>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">

        </div>
    </div>   
</body>
</html>

そしてこれ：

$('#index').live('pagebeforeshow',function(e,data){    
    $('#test-button').live('click', function(e) {
        $('#confirmDialog').popup('open');
    });    
});

jQuery 1.9 以降を使用する場合は、関数 on を使用する必要があります。live は非推奨であり、存在しません。

$(document).on('pagebeforeshow','#index',function(e,data){    
    $(document).on('click', '#test-button',function(e) {
        $('#confirmDialog').popup('open');
    });    
});

また、イベント バインドの準備が整ったドキュメントも使用していた可能性があります。jQuery Mobile では使用しないでください。代わりにpage eventsを使用してください。

于 2013-01-15T21:07:27.237 に答える
0

あなたの問題は、ヘッダーの前にポップアップIDを定義していると思います。body セクションと content の前に定義できます。次に、コンテンツ セクションで呼び出しボタンを定義し、ポップアップ呼び出し用に設定できます。

于 2016-03-18T19:25:37.113 に答える