I followed a tutorial for making an anchor tag open a second page as a dialog box, from an icon in the footer. On the desktop the dialog box opens fine and I can close it to return to the main page.

On mobile devices the dialog box does not open unless I first refresh the main page. I'm using jquery.mobile-1.4.3.min.js

1. <footer data-role="footer" data-position="fixed">
     <nav data-role="navbar">
      <ul>
       <li><a href="#info" data-icon="info" data-rel="dialog">Info</a></li>
      </ul>
     </nav>
   </footer>
2. <div data-role="page" id="info" data-theme="a">
     <header data-role="header">
      <a href="#fac" data-icon="back" data-iconpos="notext"></a>
      <h1>Hours and Location</h1>
     </header>
     <article data-role="content">
     <p>Open 9am - 4pm Monday - Friday</p>
     <p>Old Main 265</p>
     </article>
   </div>

I have looked at several tutorials and all are similar, some use data-rel="dialog" in the anchor tag while others use data-role="page" data-dialog="true" in the actual dialog box code. Either way produces the same result. It only works after a refresh.

What is missing that the tutorials have not shown?

thanks