Close button on jQuery Mobile closes entire page

Question

I have a basic call-back popup dialog in 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>

My problem is when I'm on the very first page, I open the call-back popup and then I try to close it by the close button (not clicking outside the dialog 'cause that works well) the entire page closes and the browser goes back to its start page. Obviously the data-rel='back' is triggered and it tells the browser to go back 1 page and because there's no previous page it means it will go back to the start page.

But this is not the expected behavior according jQuery Mobile API documentation: https://demos.jquerymobile.com/1.1.2/docs/pages/page-links.html

...and I also have a data-history='false' attribute which doesn't seem to take any effect.

I tried to rewrite the code with data-direction='reverse' instead of data-rel='back' adding an onclick event to the Close button:

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

It made the page reload instead of closing entirely, which is a little better when I'm on the first page but when I go to the second page it is also reloaded when I do the same thing with the popup dialog, which is not so good as the first version of the code works fine on the second page.

Can you plase tell me what I should change to make the popup dialog work properly on the first page of the website?

Answer 1

Solved by onclick="$("#call_back").popup("close");" in the href, so:

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

works.