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

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 ，以便将其视为弹出窗口而不是页面。

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 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及以下版本

与上面相同，弹出占位符应该在data-role="page" ，因为jQM 1.3不支持外部弹出窗口。 另外，用.trigger("create")替换.enhanceWithin() .trigger("create") 。

Answer 2

使用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 个解决方案

解决方案1
4 已采纳 2014-02-08 09:44:34

jQuery Mobile 1.4

jQuery Mobile 1.3及以下版本

解决方案2
1 2014-02-08 01:23:18

解决方案3
0 2018-04-27 17:27:17

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

问题描述

3 个解决方案

解决方案1 4 已采纳 2014-02-08 09:44:34

jQuery Mobile 1.4

jQuery Mobile 1.3及以下版本

解决方案2 1 2014-02-08 01:23:18

解决方案3 0 2018-04-27 17:27:17

解决方案1
4 已采纳 2014-02-08 09:44:34

解决方案2
1 2014-02-08 01:23:18

解决方案3
0 2018-04-27 17:27:17