我有这样的链接
<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?
答案 0 :(得分:4)
使用.load()
将 popup.html 加载到占位符(即<div id="PopupPH">
)。此占位符可以放在data-role="page
内部或其外部,具体取决于您使用的jQuery Mobile版本。
此外,在 popup.html 中,您需要将data-role=page"
更改为data-role="popup
才能将其视为弹出窗口而不是< EM>页
在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>
执行与上面相同的操作,但弹出占位符应位于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>