Framework7 - 动态弹出窗口
描述
可以使用相关应用方法动态创建弹出窗口，如下所示 −
myApp.popover(popoverHTML, target, removeOnClose) − 此方法接受以下参数
popoverHTML − 它是弹出窗口的 HTML 字符串。
target − 它是目标元素的 HTMLElement 或字符串(带有 CSS 选择器)，用于设置弹出窗口的位置。它是 必需 参数。
removeOnClose − 它是 Boolean 类型，是可选参数。默认情况下，它设置为 true，关闭时会从 DOM 中移除弹出窗口。
此方法将返回动态创建的弹出窗口的 HTMLElement。
示例
以下示例演示了在 Framework7 中使用动态弹出窗口−
<!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>Dynamic Popover</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="pages">
<div data-page="home" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left"> <a href="#" class="link create-menus">Menus</a></div>
<div class="center">Dynamic Popover</div>
<div class="right"> <a href="#" class="link create-about">About</a></div>
</div>
</div>
<div class="page-content">
<div class="content-block">
<p><a href="#" class="create-about">Create About Popover</a></p>
<p><a href="#" class="create-menus">Create Menus Popover</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat <a href="#" class="create-about">About</a> nibh iaculis quis. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum <a href="#" class="create-menus">Menus</a>.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<style>.popover{width:300px;}</style>
<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();
var $$ = Dom7;
$$('.create-about').on('click', function () {
var clickedLink = this;
var popoverHTML = '<div class="popover">'+
'<div class="popover-inner">'+
'<div class="content-block">'+
'<p>About Popover created dynamically.</p>'+
'<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac diam ac quam euismod porta vel a nunc.</p>'+
'</div>'+
'</div>'+
'</div>'
myApp.popover(popoverHTML, clickedLink);
});
$$('.create-menus').on('click', function () {
var clickedLink = this;
var popoverHTML = '<div class="popover">'+
'<div class="popover-inner">'+
'<div class="list-block">'+
'<ul>'+
'<li><a href="#" class="item-link list-button">Menus 1</li>'+
'<li><a href="#" class="item-link list-button">Menus 2</li>'+
'<li><a href="#" class="item-link list-button">Menus 3</li>'+
'<li><a href="#" class="item-link list-button">Menus 4</li>'+
'<li><a href="#" class="item-link list-button">Menus 5</li>'+
'</ul>'+
'</div>'+
'</div>'+
'</div>'
myApp.popover(popoverHTML, clickedLink);
});
</script>
</body>
</html>
输出
让我们执行以下步骤来查看上述代码的工作原理 −
将上述 HTML 代码保存为服务器根文件夹中的 popover_dynamic.html 文件。
以 http://localhost/popover_dynamic.html 的形式打开此 HTML 文件，输出如下所示。
您可以通过单击第一个链接来创建有关弹出窗口的动态。类似地，要创建动态菜单弹出窗口，请单击第二个链接。
单击链接时，会创建一个动态弹出窗口，您可以通过单击外部来关闭弹出窗口。
单击链接时，动态弹出窗口将打开，单击外部鼠标即可关闭弹出窗口。
framework7_overlays.html
