How to open an external html page as a popup in jquery mobile?

javascript, jquery, jquery-mobile

Solution

Use `.load()` to load popup.html into a placeholder (i.e `<div id="PopupPH">`). This placeholder can be placed either inside `data-role="page` or outside it, depending on jQuery Mobile version you are using.

Moreover, in popup.html, you need to change `data-role=page"` to `data-role="popup` in order to treat it as a popup not a page.

jQuery Mobile 1.4

Insert placeholder inside `body` tag or `data-role="page"` and load popup.html.

<body>
  <div data-role="page">
  </div>
  <div id="PopupPH">
    <!-- placeholder for popup -->
  </div>
</body>

Or

<body>
  <div data-role="page">
    <div id="PopupPH">
      <!-- placeholder for popup -->
    </div>
  </div>
</body>

Load popup.html into placeholder

$("#PopupPH").load("popup.html");

Inside popup.html popup div, add JS to create, open and remove popup once it's closed.

<div data-role="popup">
  <!-- contents -->
  <script>
    $("[data-role=popup]").enhanceWithin().popup({
        afterclose: function () {
            $(this).remove();
        }
    }).popup("open");
  </script>
</div>

jQuery Mobile 1.3 and below

Do the same as above, except for popup placeholder should be inside `data-role="page"`, because jQM 1.3 doesn't support external popup. Also, replace `.enhanceWithin()` with `.trigger("create")`.

Problem

I have a link like this ``` <a href='/path/to/popup.html' data-role="button">COME HERE </a> ``` I want to open the `popup.html file as a jquery popup.` And I cant have it inside the current page as a `<div>` with an id. I must have it out side the current file. And `I cant use dialog's as it reloads the current page.` Any idea on how to do it? Inside the `popup.html I am using just a single header.` ``` Or any methods through which I can avoid the page being reloaded when dialog is closed? ```

Original source