我一直在努力使弹出窗口在JQM中全屏显示但无法做到
这是一个fiddle
代码是这样的
HTML
<div data-role="page" id=""> <a href="#sql" id="opendialog" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-transition="pop">Open Dialog</a> <div data-role="popup" id="sql" data-dismissible="false" style="max-width:100%"> <div data-role="header" data-theme="a"> <h1>Delete Page?</h1> </div> <div role="main" class="ui-content"> <h3 class="ui-title">Are you sure you want to delete this page?</h3> <p>This action cannot be undone.</p> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">Delete</a> </div> </div> </div>
谢谢&问候
解决方法
> CSS解决方案：
这将适用于任何弹出窗口.
.ui-popup-container,.ui-popup {
height: 98%;
width: 100%;
position: absolute;
top: 0;
left:0;
}
> JS解决方案：
定位特定弹出窗口.
$(document).on("pagecreate","#pageID",function () {
$("#sql").popup({
beforeposition: function () {
$(this).css({
width: window.innerWidth,height: window.innerHeight - 14
});
},x: 0,y: 0
});
});
07000