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

时间:2014-02-08 00:55:46

标签: javascript jquery jquery-mobile

我有这样的链接

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

3 个答案:

答案 0 :(得分:4)

使用.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")

答案 1 :(得分:1)

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

答案 2 :(得分:0)

尝试

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