我一直在努力在 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 }); });
关于jquery - 如何使 jQuery Mobile 弹出窗口出现在设备的全屏中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24424160/