Question

185

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

rated 0 times [ 187] [ 2] / answers: 1 / hits: 24902 / 10 Years ago, sat, february 8, 2014, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mari

Add To Favorites

Follow

Total Points: 305

Total Questions: 100

Total Answers: 98

Location: Somalia

Member since Mon, Feb 27, 2023

1 Year ago

answered 10 Years ago harleyaleenag · Accepted Answer

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