JQuery Mobile Popup 样式不正确答案

【问题标题】：JQueryMobile Popup not styles correctlyJQuery Mobile Popup 样式不正确
【发布时间】：2013-01-15 21:01:10
【问题描述】：

我正在尝试使用 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') 方法打开弹出窗口时，标题（删除页面？）和按钮没有样式。标题显示为常规文本，按钮显示为常规链接。

什么会导致这种行为？

谢谢！

【问题讨论】：

标签： jquery-mobile

【解决方案1】：

您的 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 或更高版本时，您必须使用 function on，live 已弃用且不再存在。

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

您也可能正在使用准备好用于事件绑定的文档。它不应该与 jQuery Mobile 一起使用，而是使用 page events。

【讨论】：

好吧，你的代码给了我我需要的提示......问题是我的弹出窗口在“内容”div之外。谢谢！

【解决方案2】：

我认为您的问题是在标题之前定义弹出窗口 ID。您可以在正文部分和内容之前定义它。然后在内容部分，您可以定义调用按钮并将其设置为弹出调用。

【讨论】：