From HTML
优质
小牛编辑
130浏览
2023-12-01
描述 (Description)
您可以使用类和数据属性打开和关闭弹出窗口，如下所示 -
open-popup - 用于打开弹出窗口。
close-popup - 用于关闭弹出窗口。
data-popup=".my-popup" - 每当您的应用中使用多个弹出窗口时，您需要使用此属性指定相应的弹出窗口。
例子 (Example)
以下示例使用类和属性显示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>
// Here you can initialize the app
var myApp = new Framework7();
// If your using custom DOM library, then save it to $$ variable
var $$ = Dom7;
// Add the view
var mainView = myApp.addView('.view-main', {
// enable the dynamic navbar for this view:
dynamicNavbar: true
});
</script>
</body>
</html>
输出 (Output)
让我们执行以下步骤，看看上面给出的代码是如何工作的 -
将上面给出的HTML代码保存为服务器根文件夹中的popup_from_html.html文件。
以http://localhost/popup_from_html.html打开此HTML文件，输出显示如下。
当您单击第一个选项时，将打开html的弹出窗口，并显示第一个页面。
同样，当您单击第二个选项时，将显示第二个页面的弹出窗口。
您可以单击“关闭”弹出窗口链接以关闭弹出窗口。