jQuery Mobile - 动态弹出窗口
描述
动态创建弹出窗口，其中弹出窗口获得正确的大小和位置。
示例
以下示例演示了在 jQuery Mobile 框架中使用 动态弹出窗口。
<!DOCTYPE html>
<head>
<title>Dynamic Popup</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$( document ).on( "pagecreate", "#demo-page", function() {
$( ".nature_view" ).on( "click", function() {
var target = $( this ),
img1 = target.find( "h2" ).html(),
img2 = target.find( "p" ).html(),
img3 = target.attr( "id" ),
closebtn = '<a href = "#" data-rel = "back" class = "ui-btn ui-btn-a
ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>',
header = '<div data-role = "header">
<h2>' + img1 + ' ' + img2 + '</h2></div>',
img = '<img src = "/jquery_mobile/images/nature.jpg" alt = "' + img1 + '"
class = "img_view">',
popup = '<div data-role = "popup" id = "popup-' + img3 + '" data-short = "'
+ img3 +'" data-theme = "none" data-overlay-theme = "a"></div>';
$( header )
.appendTo( $( popup )
.appendTo( $.mobile.activePage )
.popup() )
.toolbar()
.before( closebtn )
.after( img );
$( ".img_view", "#popup-" + img3 ).load(function() {
$( "#popup-" + img3 ).popup( "open" );
clearTimeout( fallback );
});
var fallback = setTimeout(function() {
$( "#popup-" + img3 ).popup( "open" );
}, 2000);
});
$( document ).on( "popupbeforeposition", ".ui-popup", function() {
var image = $( this ).children( "img" ),
height = image.height(),
width = image.width();
$( this ).attr({ "height": height, "width": width });
var maxHeight = $( window ).height() - 75 + "px";
$( "img.img_view", this ).css( "max-height", maxHeight );
});
$( document ).on( "popupafterclose", ".ui-popup", function() {
$( this ).remove();
});
});
</script>
</head>
<body>
<div data-role = "page" id = "demo-page" data-url = "demo-page">
<div data-role = "header" data-theme = "b">
<h2>Header</h2>
</div>
<div role = "main" class = "ui-content">
<ul data-role = "listview">
<li><a href = "#" class = "nature_view">
<img src = "/jquery_mobile/images/nature.jpg" alt = "BMW">
<h2>Wonderful</h2>
<p>Nature</p></a></li>
</ul>
</div>
<div data-role = "header" data-theme = "b">
<h2>Footer</h2>
</div>
</div>
</body>
</html>
输出
让我们执行以下步骤，看看上面的代码是如何工作的 −
将上述 html 代码保存为服务器根文件夹中的 jqm_dynamic_popup.html 文件。
将此 HTML 文件打开为 http://localhost/jqm_dynamic_popup.html，将显示以下输出。
