jQuery Mobile 中的弹出窗口没有按预期工作，请咨询

Posted 2023-05-09

【中文标题】jQuery Mobile 中的弹出窗口没有按预期工作，请咨询

【英文标题】：Popups in jQuery Mobile not working as intended, please advice

【发布时间】：2012-06-15 07:33:09

【问题描述】：

jQuery Mobile 中的弹出窗口无法正常工作，请指教。

弹出的DIV仍然可见，人们希望DIV被隐藏并且单击链接时它不会弹出。它似乎在jQuery文档中的演示中工作。

下面的代码有问题吗？

<a href="#transitionExample" data-transition="pop" data-role="button" data-inline="true" data-rel="popup">Pop Up</a>
     <div data-role="popup" id="transitionExample">
     This is a POP UP.
    </div>

【参考方案1】：

您正在使用尚未发布的测试版功能，我会检查以确保您正在使用

jQuery 1.7.1 或更高版本 (http://jquerymobile.com/test/js/jquery.js) jQM 1.2.0 (http://jquerymobile.com/test/js/jquery.mobile.js) jQM 1.2.0 css (http://jquerymobile.com/test/css/themes/default/jquery.mobile.css)

活生生的例子：

http://jsfiddle.net/WSZ5b/1/

文档：

http://jquerymobile.com/test/docs/pages/popup/index.html

您的代码：

<div data-role="page" class="type-interior">
    <div data-role="content" class="ui-body">
        <a href="#transitionExample" data-transition="pop" data-role="button" data-inline="true" data-rel="popup">Pop Up</a>
        <div data-role="popup" id="transitionExample">
            This is a POP UP.
        </div>
    </div>
</div>

【讨论】：

感谢您的回答伙伴，因为它是一个测试版功能，我不确定我是否应该使用 jQM1.2（测试）。我正在处理一个需要下周上线的项目。现在我想我会使用 jQueryMobile SimpleDialog 2。你有什么建议？

如果你在推特上，你可以询问 jQM 的开发人员@jquerymobile 1.2.x 的发布日期是什么时候？如果它足够接近，我会保留弹出窗口，但如果它们在发布更新之前几周或更长时间，我将使用对话框功能。但这都是相对的，因为有更多的未知变量，例如，1- 发布代码后你能更新吗，你的目标设备是什么，发布日期是什么时候等等......还有一些其他的事情需要考虑

就我而言，css 正在做所有疯狂的事情。升级到 v1.2 成功了。谢谢

【参考方案2】：

HTML

<p>You have entered: <span id="dialogoutput"></span></p>

    <a href="#" id="dialoglink" data-role="button">Open Dialog</a>

jQuery

$(document).delegate('#simplestring', 'click', function() 
  $(this).simpledialog(
    'mode' : 'string',
    'prompt' : 'What do you say?',
    'buttons' : 
      'OK': 
        click: function () 
          $('#dialogoutput').text($('#dialoglink').attr('data-string'));
        
      ,
      'Cancel': 
        click: function ()  ,
        icon: "delete",
        theme: "c"
      
    
  )
)

参考：_

http://jquerymobile.com/branches/popup-widget/docs/pages/popup/index.html

http://dev.jtsage.com/jQM-SimpleDialog/demos/string.html