Question

我在 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>

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

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

Answer 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>

有效。

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

1 个答案: