如何在一个html文件中的全部(常用)弹出窗口中的所有页面?
我试试这个.但不工作…
我试试这个.但不工作…
<div data-role="page" id="home"></div> <div data-role="page" id="news"></div> <div data-role="page" id="details"></div> <div data-role="popup" id="settings" data-corners="false" data-theme="none" data-shadow="false" data-tolerance="0,0"></div>
解决方法
如果你使用jQuery Mobile 1.4.1
Documentation表示,如果您将其声明为body元素的直接子元素,则可以在多个页面上重复使用相同的弹出窗口.它可以出现在文档中的任何页面上:
<div id="popup-outside-page" data-theme="a"> <!-- This popup has its theme explicitly defined via data-theme="a" because it has no parent from which to automatically inherit its theme --> <ul data-role="listview"> <li>Global Menu</li> <li><a href="#demo-intro">Intro Page</a></li> <li><a href="#other-page">Other Page</a></li> <li><a href="#third-page">Third Page</a></li> </ul> </div> <div id="other-page" data-role="page" data-url="other-page"> <div data-role="header"> <a href="#popup-outside-page" data-rel="popup">Menu</a> <h1>Another Page</h1> </div> <div role="main" class="ui-content"> <p>This is another page that can be reached using the links in the global menu.</p> </div> </div> <div id="third-page" data-role="page" data-url="third-page"> <div data-role="header"> <a href="#popup-outside-page" data-rel="popup">Menu</a> <h1>Third Page</h1> </div> <div role="main" class="ui-content"> <p>This is a third page that can be reached using the links in the global menu.</p> </div> </div>
如果您在任何页面之外定义弹出窗口,那么您必须小心自己实例化弹出窗口部件.您可以在DOMReady早期执行此操作,因为弹出窗口不在任何页面上:
// Instantiate the popup on DOMReady,and enhance its contents $( function() { $( "#popup-outside-page" ).enhanceWithin().popup(); });
如果希望通过一组链接打开弹出窗口,那么您还必须手动处理弹出窗口,因为通过data-rel =“弹出”的自动处理仅限于活动页面上的弹出窗口.
如果您使用的是旧版本的jQuery Mobile
简单的答案是你不能. documentation规定:
A popup div has to be nested inside the same page as the link
所以你必须将弹出窗口复制粘贴到你想要显示的每个页面上,这听起来不是一个好的解决方案.
当我需要像全局弹出窗口一样的东西时,我通常会使用dialog,可以从任何页面打开.
对话框本身具有与页面相同的结构:
<div id="diag" data-role="dialog"> <div data-role="header" data-theme="d"> <h1>Info</h1> </div> <div data-role="content" data-theme="c"> <h1>Thank you for your time!</h1> <a data-role="button" data-rel="back">Ok</a> </div> </div>
你可以编程地打开它:
$.mobile.changePage("#diag");
或者点击一个按钮作为任何其他jQuery手机页面:
<a href="#diag" data-role="button" data-rel="dialog" data-theme="a">Open dialog</a>