logo标签列表

如何在jQuery Mobile中以弹出窗口形式打开外部HTML页面？

javascriptjqueryjquery-mobile
3
我有一个链接像这样
<a href='/path/to/popup.html' data-role="button">COME HERE </a>

我想将 popup.html文件打开为jquery弹出窗口。 并且我不能在当前页面上使用具有id的<div>。我必须在当前文件之外打开它。

我不能使用对话框，因为它会重新加载当前页面。 有什么办法可以做到吗？

在popup.html中，我只使用了单个标题。

Or any methods through which I can avoid the page being reloaded when dialog is closed?
3个回答
4
使用.load()将popup.html加载到占位符（即<div id="PopupPH">）中。根据您使用的jQuery Mobile版本，此占位符可以放置在data-role="page"内或外。
此外，在popup.html中，您需要将data-role="page"更改为data-role="popup"，以便将其视为popup而不是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加载到占位符中

$("#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不支持外部弹出框。此外，请用.trigger("create")替换.enhanceWithin().

1
非常感谢！三个月后我也会像你一样了！ - user3283104
2
@user3283104 比我更擅长;) - Omar
1
使用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对话框似乎不会刷新页面，只是用新的背景蒙住它以引起注意。

不，它没有这样做！ - user3283104
0

尝试

<a href="google.com" rel="external">Test</a>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接