Question

我有一个弹出窗口，看起来我想要它，但标题和按钮出现在所有页面上。如果我删除标题中的ui-title类，它将不再出现，但看起来不是我想要的。如果我删除ui-btn-inner和ui-btn类，则按钮将不再显示在所有页面中，但样式将再次关闭。如何保持这种样式，但没有按钮和标题显示在所有页面上？

这是弹出窗口：

<div data-role="popup" id="popupDialog" 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 ui-header ui-bar-a" role="banner">
        <h1 class="ui-title" role="heading" aria-level="1">Create Location Page?</h1>
    </div>
    <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content ui-body-d" role="main">
        <h3 class="ui-title">You are about to create a new Location?</h3>
        <p>This action cannot be undone.</p>
        <a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c" data-corners="true" data-shadow="true" data-iconshadow="true"  class="ui-btn ui-shadow ui-btn-corner-all ui-btn-inline ui-btn-up-c">
            <span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-inner ui-btn-corner-all">Cancel</span></span>
        </a>    
        <a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b" data-corners="true" data-shadow="true"  data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-inline ui-btn-up-b">
            <span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-inner ui-btn-corner-all">Create</span></span>
        </a>
    </div>
</div>

调用此选项后会触发弹出窗口：

    function PopupTest(){
        $('#popupDialog').popup();
        $('#popupDialog').popup("open");
    }

Answer 1

不要在documentation中清除弹出窗口小部件，而是根据blog post清除jQuery Mobile 1.2版本，目前弹出窗口小部件必须在页面包装器中，但是在将来的版本中，这不再是必要的。

以下是相关文字

弹出窗口必须位于页面包装器中（暂时）

阿尔法消失后，我们也听到了非常明确的反馈意见   想要通过将弹出窗口放在页面外来重复使用弹出窗口   容器。目前这不会起作用，因为许多小部件   （列表视图，工具栏）是建立在他们生活的假设之上的   在页面容器内部进行主题继承和增强工作。   直到这些小部件被重新考虑在页面外工作   未来发布时，弹出窗口只应在页面中添加。

Answer 2

通过在我希望它存在的页面的页面包装中移动我的弹出窗口，弹出窗口将只显示在我想要的页面上。

弹出按钮出现在所有页面上

2 个答案: