COME ...">
Geek asks and answers

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

I have a link like this

<a href='/path/to/popup.html' data-role="button">COME HERE </a>

I want to open popup.html file as a jquery popup.And I can not find it on the current page as <div>with an identifier. I should have this aside from the current file.

And I cant use dialog as it reloads the current page.any idea on how to do this?

Inside 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?
+3
source share
3 answers

Use .load()to load popup.html in placeholder (ie <div id="PopupPH">). This placeholder can be placed either inside data-role="pageor outside of it, depending on the version of jQuery Mobile you are using.

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

jQuery Mobile 1.4

body data-role="page" popup.html.

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


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

popup.html placeholder

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

popup.html popup div, JS , .

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

jQuery Mobile 1.3

, , , popup placeholder data-role="page", jQM 1.3 . , .enhanceWithin() .trigger("create").

+4

jQuery mobile, iframe , -, , . (, .. )

<div class="hidden">
     <div data-role="popup" id="externalpage">
         <iframe src="http://www.bbc.com" 
                 width="480" 
                 height="320" 
                 seamless>
          </iframe>
     </div>
</div>    

<a href='#externalpage' 
   data-rel="popup"  
   data-role="button">COME HERE</a>

<script>
$(document).on("pageinit", function() {    
    $( "#externalpage" ).on({
        popupbeforeposition: function( event, ui ) {  
            console.log( event.target );
        }
    });
});
</script>

: http://jsfiddle.net/tcS8B/ jQuery Mobile Dialogs , , .

0

Try

<a href="google.com" rel="external">Test</a>
0
source

More articles:


All Articles