Question

<div data-role="header" id="header"> <h1>Qsr Food</h1> <a href="info.html" rel="external" data-icon="info" data-iconpos="notext" data-rel="dialog" data-transition = "flip" class="ui-btn-right">info</a> </div><!------- header div-----> <div data-role="content" id="content"> </div><!----- main div------->

这是info.html代码

<div data-role="dialog" id="info" data-theme="e" data-transition="flip"> <div data-role="header"> <h1>About View Source</h1> </div>

<div data-role="content">
<p> View Source offers short projects on intermediate to advanced web design topics, coveing technologies such as HTML, PHP< JQuery, and CSS, as well as content management solutions like WordPress and integration with Twitter, YouTube, and more.</p>
</div>

我错了什么

Answer 1

添加rel=external将有效停止转换。要使data-transition生效，请在第一页中加载与info.html相关的脚本，然后从链接中删除rel = external。

对于对话框，请移除rel=external，您就可以了。无需额外的JavaScript。让神奇的工作本身:-)

额外参考

Dialog widgets API docs

重要

这些方法在Chrome桌面版本中不起作用，但在移动版本中起作用。除了使用rel= external来处理chrome之外别无他法。

Answer 2

要打开外部HTML作为对话框，请使用以下代码

HTML - 链接到您的dialog.html，其ID为dialog。

<a href="#" id="dialog" data-icon="info" data-iconpos="notext">info</a>

jQuery Mobile

$(document).on('click', '#dialog', function() {
 $.mobile.changePage('dialog.html', { role: 'dialog', transition: 'flip' });
});

数据转换不适用于外部链接

2 个答案: