0

我有点失落-我从jquery演示页面中获取了一个弹出示例作为模板...

如果我将弹出窗口放在第一页中，它就可以工作 - 我可以从 js 脚本中调用它来打开。

因此......以下确实有效

    <div data-role="page" class="page" id="Menu">
    <div data-role="header" data-position="fixed" class="ui-title center">
        <div data-role="controlgroup" data-type="horizontal">
            <a href="#" class="ui-btn ui-corner-all ui-icon-user ui-btn-icon-notext">&nbsp;</a>
            <a href="#OrderList" class="ui-btn ui-corner-all width150 htitle OrderList">&nbsp;<span class='htitle'>Barserver.com</span>&nbsp;</a>
            <a href="#" class="ui-btn ui-corner-all ui-icon-gear ui-btn-icon-notext">&nbsp;</a>
        </div>
    </div>
    <div id="MainContent">
        <div id="MenuList"></div>    
    </div>
<div data-role="popup" id="popup" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
        <div data-role="header" data-theme="a">
        <h1>Delete Page?</h1>
        </div>
        <div role="main" class="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="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
            <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">Delete</a>
        </div>
</div>

我可以通过动态打开它

$("#popup").popup("open");

但是，如果我将弹出窗口移动到同一文档中的另一个（数据角色）页面，它不会显示，console.log 中也不会出现错误。谁能引导我前进？以下不起作用...

<div data-role="page" class="page" id="OrderList">
    <div data-role="header" data-position="fixed" class="ui-title text-center">
        <div data-role="controlgroup" data-type="horizontal">
            <a href="#Menu" class="ui-btn ui-corner-all ui-icon-carat-l ui-btn-icon-notext Menu">&nbsp;</a>
            <a href="#Menu" class="ui-btn ui-corner-all width150 htitle Menu">&nbsp;<span class='htitle'>Barserver.com</span>&nbsp;</a>
            <a href="#Customer" class="ui-btn ui-corner-all ui-icon-carat-r ui-btn-icon-notext">&nbsp;</a>
        </div>
    </div>
    <div id="OrderListContent" class="productdhtml ui-content"></div>
<div data-role="popup" id="popup" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
            <div data-role="header" data-theme="a">
            <h1>Delete Page?</h1>
            </div>
            <div role="main" class="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="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
                <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">Delete</a>
            </div>
    </div>
        </div>

为避免误解 - 第一个代码示例有效，第二个无效（意味着没有错误，没有显示类似对话框的模式）。

为什么？

（当然感谢所有帮助）

4

1 回答 1

1

我明白了（感谢@Omar 的指导）。编码答案并不容易，但我会在几天内尝试草稿和分享（因为试图解决这个问题，我的工作落后了）。

就本说明而言，当我说“失败”时，我的意思是“没有弹出窗口，地址栏没有变化，没有控制台错误”。

我有一个表格。如果操作员试图离开，应进行测试以确认输入了所有数据。我所有的 a-href 标签都有页面引用，jquery 优先于我应用的任何其他事件 a-href 标签。我没有考虑过这件事的后果。结果？表单显示，未填写完整，操作员选择导航到其他地方，弹出呼叫开始/结束但“失败”，jquery 快速导航到 a-href 页面中命名的页面。

解决方案：使用弹出窗口时，不要在 a-href 标签中命名页面。因此，在使用弹出窗口时，请避免

<a href='#Page5'>Page 5</a>

而是

<a href='#' id='page5'>Page 5</a>

并创建一个事件来决定是否应显示弹出窗口，如果不显示，则应导航到 page5。

我希望这是有道理的。

于 2016-09-02T14:06:24.360 回答