如何使Jquery移动弹出窗口出现在设备的全屏幕中 [英] How to make a Jquery mobile popup appear in full screen of device
本文介绍了如何使Jquery移动弹出窗口出现在设备的全屏幕中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我一直在努力使弹出窗口以全屏显示在JQM中,但无法做到这一点。
这是一个 小提琴
代码就像这样
HTML
< div data -role =pageid => < a href =#sqlid =opendialogdata-rel =popupclass =ui-btn ui-corner-all ui-shadow ui -btn-inlinedata-transition =pop>打开对话框< / a>
< div data-role =headerdata-theme =a>
< h1>删除页面?< / h1>
< / div>
< div role =mainclass =ui-content>
< h3 class =ui-title>您确定要删除此页面吗?< / h3>
< p>此操作无法撤消。< / p> < a href =#class =ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn -bdata-rel =back>取消< / a>
< / div>
< / div>
< / div>
感谢&问候
解决方案
-
CSS解决方案:
这适用于任何弹出窗口。
.ui-popup-container,。 ui-popup {
height:98%;
宽度:100%;
位置:绝对;
top:0;
剩下:0;
}
-
JS解决方案:
目标具体弹出窗口。
$(document).on(pagecreate ,#pageID,function(){
$(#sql)。popup({
beforeposition:function(){
$(this).css({
width:window.innerWidth,
height:window.innerHeight - 14
});
},
x:0,
y:0
}) ;
});
I have been trying hard to make a popup appear in full screen in JQM but not able to do it
Here is a fiddle
And the code is like this
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>
Thanks & Regards
解决方案
CSS solution:
This will apply to any popup.
.ui-popup-container, .ui-popup { height: 98%; width: 100%; position: absolute; top: 0; left:0; }
JS solution:
Target specific popup.
$(document).on("pagecreate", "#pageID", function () { $("#sql").popup({ beforeposition: function () { $(this).css({ width: window.innerWidth, height: window.innerHeight - 14 }); }, x: 0, y: 0 }); });
这篇关于如何使Jquery移动弹出窗口出现在设备的全屏幕中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文