jQuery Mobile 上的关闭按钮关闭整个页面

Posted 2023-05-09

【中文标题】jQuery Mobile 上的关闭按钮关闭整个页面

【英文标题】：Close button on jQuery Mobile closes entire page

【发布时间】：2021-06-23 13:46:36

【问题描述】：

我在 jQuery Mobile 中有一个基本的回调弹出对话框：

<a id='callback' href='#call_back' data-rel='popup' data-position-to='window' aria-owns='pre-rendered' aria-haspopup='true' aria-expanded='false' data-history='false'><div>CALLBACK<br><span>Provide us your phone number<br>and we will call you back!</span></div></a>
<!-- a lot of other stuff comes here... -->
<!-- back to popup dialog -->
<div id='call_back-screen' class='ui-popup-screen ui-screen-hidden'></div>
<div id='call_back-popup' class='ui-popup-container flip ui-popup-hidden ui-body-inherit ui-overlay-shadow ui-corner-all'>
    <div id='call_back' data-fn='call_back' class='fn_data ui-content ui-popup ui-body-a ui-overlay-shadow ui-corner-all' data-role='popup' data-enhanced='true' data-theme='a' data-transition='flip'>
        <div data-role='header' role='banner' class='ui-header ui-bar-inherit'>
            <div>Welcome!</div>
            <a href='#' data-history='false' data-rel='back' class='ui-btn-right ui-btn ui-btn-a ui-icon-delete ui-btn-icon-notext ui-shadow ui-corner-all' data-role='button' role='button'>Close</a>
        </div>
        <div role='main' class='ui-content'>
            <div class='row nob msg'>
                <div class='ui-field-contain'>If you provide us your phone number and your email address, we are going to call you back in 2 days and help.</div>
            </div>
            <!-- input fields come here -->
        </div>
    </div>
</div>

我的问题是当我在第一页时，我打开回调弹出窗口，然后我尝试通过关闭按钮关闭它（不要点击对话框外部，因为效果很好）整个页面关闭并且浏览器返回到它的起始页面。显然 data-rel='back' 被触发，它告诉浏览器返回 1 页，因为没有前一页，这意味着它将返回到起始页。

但这不是 jQuery Mobile API 文档所期望的行为： https://demos.jquerymobile.com/1.1.2/docs/pages/page-links.html

...而且我还有一个 data-history='false' 属性似乎没有任何效果。

我尝试使用 data-direction='reverse' 而不是 data-rel='back' 重写代码，将 onclick 事件添加到关闭按钮：

<a href='#' data-history='false' data-direction='reverse' class='ui-btn-right ui-btn ui-btn-a ui-icon-delete ui-btn-icon-notext ui-shadow ui-corner-all' data-role='button' role='button' onclick='history.go(0);'>Close</a>

它使页面重新加载而不是完全关闭，当我在第一页时这会好一点，但是当我转到第二页时，当我对弹出对话框执行相同操作时，它也会重新加载，其中不如第一个版本的代码在第二页上运行良好。

你能告诉我我应该改变什么以使弹出对话框在网站的第一页上正常工作吗？

【参考方案1】：

由onclick="$("#call_back").popup("close");"在href中解决，所以：

<a href='#' data-history='false' data-direction='reverse' class='ui-btn-right ui-btn ui-btn-a ui-icon-delete ui-btn-icon-notext ui-shadow ui-corner-all' data-role='button' role='button' onclick='$("#call_back").popup("close");'>Close</a>

有效。