如何使Jquery移动弹出窗口出现在设备的全屏幕中
我一直在努力使弹出窗口在JQM中全屏显示但无法做到
这是一个小提琴
代码是这样的
HTML
感谢和问候
-
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移动填充为15px,并将弹出窗口宽度设置为100%,而不编写硬编码值,则可以执行以下操作:
HTML:
CSS:
.ui-popup-container { width: 100%; height: 100%; }
JavaScript的:
$(document).on("pagecreate", function (event, ui) { $("#sql").on("popupbeforeposition", popUpSql_OnBeforePosition); }); function popUpSql_OnBeforePosition(event, ui) { var horizSpacing = 5; var vertSpacing = 5; var horizPaddingBorderSize = $(this).outerWidth() - $(this).width(); var vertPaddingBorderSize = $(this).outerHeight() - $(this).height(); $(this).css({ left: horizSpacing, top: vertSpacing, width: window.innerWidth - (horizSpacing * 2) - horizPaddingBorderSize, height: window.innerHeight - (vertSpacing * 2) - vertPaddingBorderSize }); }
此代码还允许您更改弹出窗口的水平和垂直间距,使阴影边框可见。
的jsfiddle
此代码将新方法’setText’添加到jquery源中定义的widget mobile.popup。 用它来更改弹出内容。 弹出窗口将自动居中于窗口