Framework7 - HTML 中的覆盖弹出窗口
说明
您可以使用类和数据属性打开和关闭弹出窗口，如下所示 −
open-popup − 用于打开弹出窗口。
close-popup − 用于关闭弹出窗口。
data-popup=".my-popup" − 每当您的应用中使用多个弹出窗口时，您都需要使用此属性指定适当的弹出窗口。
示例
以下示例使用类和属性在 Framework7 中显示 HTML 中的弹出窗口−
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Popup from HTML</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center sliding">Popup from HTML</div>
</div>
</div>
<div class = "pages">
<div data-page = "index" class = "page navbar-fixed">
<div class = "page-content">
<div class = "content-block">
<p><a href = "#" data-popup = ".first_page" class = "open-popup">Open First Page</a></p>
<p><a href = "#" data-popup = ".second_page" class = "open-popup">Open Second Page</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "popup first_page">
<div class = "content-block">
<p>First Page</p>
<p> <a href = "#" class = "close-popup">Close popup</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac diam
ac quam euismod porta vel a nunc. Quisque sodales scelerisque est, at porta justo cursus
ac. Integer vitae quam a ante lobortis lobortis. Nam vehicula sagittis quam, sit amet
congue purus consequat sed. Maecenas eget mattis lectus. Aliquam luctus luctus leo ac
fringilla. Sed nec eros vel purus tincidunt tincidunt in in orci. Sed tellus neque,
pellentesque nec metus id, congue elementum odio.</p>
</div>
</div>
<div class = "popup second_page">
<div class = "content-block">
<p>Second Page</p>
<p> <a href = "#" class = "close-popup">Close popup</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac diam
ac quam euismod porta vel a nunc. Quisque sodales scelerisque est, at porta justo cursus
ac. Integer vitae quam a ante lobortis lobortis. Nam vehicula sagittis quam, sit amet
congue purus consequat sed. Maecenas eget mattis lectus. Aliquam luctus luctus leo ac
fringilla. Sed nec eros vel purus tincidunt tincidunt in in orci. Sed tellus neque,
pellentesque nec metus id, congue elementum odio.</p>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
// 您可以在此处初始化应用程序
var myApp = new Framework7();
// 如果您使用自定义 DOM 库，则将其保存到 $$ 变量
var $$ = Dom7;
// 添加视图
var mainView = myApp.addView('.view-main', {
// 为该视图启用动态导航栏:
dynamicNavbar: true
});
</script>
</body>
</html>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述 HTML 代码保存为服务器根文件夹中的 popup_from_html.html 文件。
以 http://localhost/popup_from_html.html 的形式打开此 HTML 文件，输出如下所示。
单击第一个选项时，将打开一个来自 html 的弹出窗口，并向您显示第一页。
同样，单击第二个选项时，将显示第二页的弹出窗口。
您可以单击"关闭弹出窗口"链接来关闭弹出窗口。
framework7_overlays.html
