Framework7 - 使用 JavaScript 的覆盖弹出窗口
说明
您可以使用 JavaScript 代码打开和关闭弹出窗口。您可以使用 popup(popup) 方法打开弹出模式，使用 closeModal(popup) 方法关闭弹出模式。
示例
以下示例使用 Framework7 中的 JavaScript 在单击链接时显示弹出窗口 −
<!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 using JavaScript</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 using JavaScript</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 = "#" class = "first_page">Open First Page</a></p>
<p><a href = "#" class = "second_page">Open Second Page</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "popup 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 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
});
//It will open popup when you click the link with class 'first_page'
$$('.first_page').on('click', function() {
myApp.popup('.popup-first_page');
});
//It will open popup when you click the link with class 'second_page'
$$('.second_page').on('click', function() {
myApp.popup('.popup-second_page');
});
</script>
</body>
</html>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述 HTML 代码保存为服务器根文件夹中的 popup_using_javascript.html 文件。
将此 HTML 文件作为 http://localhost/popup_using_javascript.html 打开，输出显示如下。
单击第一个选项时，将打开一个弹出窗口并显示第一页，然后使用 javascript 代码打开和关闭弹出窗口。
同样，单击第二个选项时，将显示第二页的弹出窗口。
您可以单击"关闭弹出窗口"链接来关闭弹出窗口。
framework7_overlays.html
