无法使用jQuery Mobile 1.3.1显示弹出窗口 [英] Cannot show Popup with jQuery Mobile 1.3.1
问题描述
我正在尝试弹出一个非常简单的您确定吗?" jQuery Mobile中的弹出窗口.但是,如果我在按钮上使用data-rel="popup"
,则什么也不会发生.如果我删除data-rel
,它将打开-但将其显示为一个完整的窗口.逻辑运作良好,但我仍然希望看到一个弹出窗口.
I'm trying to pop up a very simple "are you sure?" popup in jQuery Mobile. But if I use the data-rel="popup"
on the button, nothing happens. If I remove the data-rel
it opens - but as a full window. The logic works well, but still, I'd like to see a popup.
这是代码(简化了-我删除了其他页面,标头,html等-该应用程序除此问题外运行良好,因此无需调试它们).要查看的2个元素是按钮"clearHistory"和弹出窗口本身的"history":
Here's the code (simplified - I removed the other pages, the header, html etc. - the app works well other than this issue, so no need to debug those). The 2 elements to look at are the button "clearHistory" and the popup itself "history":
<!-- history page -->
<div data-role="page" id="history">
<div data-role="header" data-position="fixed">
<a href="#" data-role="button" data-rel="back" data-icon="arrow-l" data-iconpos="notext">Back</a>
<h1>History</h1>
<a href="#deletePopup" data-role="button" data-rel="popup" id="clearHistory" data-icon="delete" data-iconpos="notext" data-theme="d">Delete</a>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" id="historyList" data-inset="true" data-theme="f"></ul>
<h4 id="historyEmpty">History is empty</h4>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4><a class="ttg" href="http://www.TravelingTechGuy.com" rel="external" target="_blank">Traveling Tech Guy</a></h4>
</div><!-- /footer -->
</div>
<!-- end history page -->
<!-- delete history popup -->
<div data-role="popup" id="deletePopup" data-overlay-theme="a" data-theme="c" data-dismissible="false">
<div data-role="header" data-theme="a">
<h1>Delete History?</h1>
</div>
<div data-role="content" data-theme="d">
<h3>Delete all items in history?</h3>
<a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="b">Cancel</a>
<a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="d" id="deleteHistory">Delete</a>
</div>
</div>
<!-- delete history popup -->
知道我在这里想念什么吗?
Any idea what am I missing here?
推荐答案
将弹出窗口置于<div data-role=page>
内,并且该div应该是弹出窗口div的直接父级.我在下面的演示中放在<div data-role=content>
之前.
Place popup inside <div data-role=page>
and that div should be the direct parent of popup div. I placed before <div data-role=content>
in the below demo.
Demo
对话框应放置在<div data-role=page>
外部,因为它们被视为页面.
Dialog should be placed outside <div data-role=page>
because they are treated as a page.
这篇关于无法使用jQuery Mobile 1.3.1显示弹出窗口的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!