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

2019-08-31 04:37:09 阅读：131 来源： 互联网

我有这样的链接

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

我想打开popup.html文件作为jquery弹出窗口.我不能在当前页面中将其作为< div>带有身份证.我必须把它放在当前文件旁边.

我无法使用对话框重新加载当前页面.有什么想法怎么做？

在popup.html中我只使用一个标题.

Or any methods through which I can avoid the page being reloaded when dialog is closed?

解决方法:

使用.load()将popup.html加载到占位符中(即< div id =“PopupPH”>).此占位符可以放在data-role =“页面内部或其外部,具体取决于您使用的jQuery Mobile版本.

此外,在popup.html中,您需要将data-role = page“更改为data-role =”弹出窗口,以便将其视为弹出窗口而不是页面.

jQuery Mobile 1.4

在主体标记或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().

标签：javascript,jquery,jquery-mobile
来源： https://codeday.me/bug/20190831/1772926.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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