Popup 是一种可以包含任何Html内容的弹出窗口,从App的主内容区域上弹出。 Popup 和其他所有的遮罩图层一样,是所谓的“临时视图”的一部分。
Popup 布局相当简单. 你所需要做的就是将 <div class="popup"> 任何需要展示的内容 </div>
放到 body 里正确的位置上:
<body> ... <div class="popup"> Any HTML content goes here </div> </body>
默认的 Popup 在手机和平板(iPad)上尺寸有一些不同。在手机上是全屏的,在平板上宽高都是630px。如果你想使它在平板上也是全屏的,你应该添加额外的"tablet-fullscreen"类到需要的popup中:
<body> ... <!-- This popup has fullscreen size on tablets --> <div class="popup tablet-fullscreen"> Any HTML content goes here </div> </body>
可以通过在链接上使用特定的类和data属性打开和关闭所需的popups:
为了打开popup,我们需要添加 "open-popup" 类到任意 HTML 元素上 (最好是链接)
为了关闭popup,我们需要添加 "close-popup" 类到任意 HTML 元素上 (最好是链接)
如果你的App里有超过一个popups, 你需要指定适当popup,则需添加额外的属性 data-popup=".my-popup" 到这个 HTML 元素上
根据上面的注意点:
<body> ... <div class="page-content"> <div class="content-block"> <!-- In data-popup attribute we specify CSS selector of popup we need to open --> <p><a href="#" data-popup=".popup-about" class="open-popup">Open About Popup </a></p> <p><a href="#" data-popup=".popup-services" class="open-popup">Open Services Popup </a></p> </div> </div> ... <!-- About Popup --> <div class="popup popup-about"> <div class="content-block"> <p>About</p> <p><a href="#" class="close-popup">Close popup</a></p> <p>Lorem ipsum dolor ...</p> </div> </div> <!-- Services Popup --> <div class="popup popup-services"> <div class="content-block"> <p>Services</p> <p><a href="#" class="close-popup">Close popup</a></p> <p>Lorem ipsum dolor ...</p> </div> </div> </body>
我们也可以用使用JavaScript来打开和关闭Popups ,因此我们需要看一下相关的App方法:
myApp.popup(popup) - 打开 Popup
myApp.closeModal(popup) - 关闭 Popup
<body> ... <div class="page-content"> <div class="content-block"> <p><a href="#" class="open-about">Open About Popup </a></p> <p><a href="#" class="open-services">Open Services Popup </a></p> </div> </div> ... <!-- About Popup --> <div class="popup popup-about"> <div class="content-block"> <p>About</p> <p><a href="#" class="close-popup">Close popup</a></p> <p>Lorem ipsum dolor ...</p> </div> </div> <!-- Services Popup --> <div class="popup popup-services"> <div class="content-block"> <p>Services</p> <p><a href="#" class="close-popup">Close popup</a></p> <p>Lorem ipsum dolor ...</p> </div> </div> </body>
var myApp = new Framework7(); var $$ = Dom7; $$('.open-about').on('click', function () { myApp.popup('.popup-about'); }); $$('.open-services').on('click', function () { myApp.popup('.popup-services'); });
Popup 和 Modals有一样的事件, 如果你需要在打开/关闭popup时使用JavaScript做一些事情的时候,这些事件会很有用。
Event(事件) | Target(目标) | Description(描述) |
---|---|---|
open | Popup Element<div class="popup"> | 当 Popup 开始打开动画时,事件将被触发。 |
opened | Popup Element<div class="popup"> | 当 Popup 完成打开动画时,事件将被触发。 |
close | Popup Element<div class="popup"> | 当 Popup 开始结束动画时,事件将被触发。 |
closed | Popup Element<div class="popup"> | 当 Popup 完成结束动画后,事件将被触发。 |
<body> ... <div class="page-content"> <div class="content-block"> <!-- In data-popup attribute we specify CSS selector of popup we need to open --> <p><a href="#" data-popup=".popup-about" class="open-popup">Open About Popup </a></p> <p><a href="#" data-popup=".popup-services" class="open-popup">Open Services Popup </a></p> </div> </div> ... <!-- About Popup --> <div class="popup popup-about"> <div class="content-block"> <p>About</p> <p><a href="#" class="close-popup">Close popup</a></p> <p>Lorem ipsum dolor ...</p> </div> </div> <!-- Services Popup --> <div class="popup popup-services"> <div class="content-block"> <p>Services</p> <p><a href="#" class="close-popup">Close popup</a></p> <p>Lorem ipsum dolor ...</p> </div> </div> </body>
var myApp = new Framework7(); var $$ = Dom7; $$('.popup-about').on('opened', function () { console.log('About Popup opened') }); $$('.popup-about').on('close', function () { console.log('About Popup is closing') }); $$('.popup-services').on('open', function () { console.log('Services Popup is opening') }); $$('.popup-services').on('closed', function () { console.log('Services Popup is closed') });
Framework7允许你调用相关的App方法时传递HTML内容来动态地创建Popup:
myApp.popup(popupHTML, removeOnClose) - 打开 Popup
<body> ... <div class="page-content"> <div class="content-block"> <!-- In data-popup attribute we specify CSS selector of popup we need to open --> <p><a href="#" class="create-popup">Create Popup</a></p> </div> </div> ... </body>
var myApp = new Framework7(); var $$ = Dom7; $$('.create-popup').on('click', function () { var popupHTML = '<div class="popup">'+ '<div class="content-block">'+ '<p>Popup created dynamically.</p>'+ '<p><a href="#" class="close-popup">Close me</a></p>'+ '</div>'+ '</div>' myApp.popup(popupHTML); });