Question

我有这样的链接

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

我想打开popup.html file as a jquery popup.并且我无法在当前页面中将其作为带有ID的<div>。我必须将它放在当前文件旁边。

I cant use dialog's as it reloads the current page.有关如何做的任何想法吗？

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

Answer 1

使用.load()将 popup.html 加载到占位符（即<div id="PopupPH">）。此占位符可以放在data-role="page内部或其外部，具体取决于您使用的jQuery Mobile版本。

此外，在 popup.html 中，您需要将data-role=page"更改为data-role="popup才能将其视为弹出窗口而不是< EM>页

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 加载到占位符

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

在 popup.html 弹出式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及以下

执行与上面相同的操作，但弹出占位符应位于data-role="page"内，因为jQM 1.3不支持外部弹出窗口。另外，将.enhanceWithin()替换为.trigger("create")。

Answer 2

使用框架＆amp;在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不刷新我不认为的页面，它只是用一个新的背景来掩盖它，以便集中注意力。

Answer 3

尝试

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

如何在jquery mobile中打开外部html页面作为弹出窗口？

3 个答案:

jQuery Mobile 1.4

jQuery Mobile 1.3及以下