如何使Jquery移动弹出窗口出现在设备的全屏幕中

前端之家收集整理的这篇文章主要介绍了如何使Jquery移动弹出窗口出现在设备的全屏幕中前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我一直在努力使弹出窗口在JQM中全屏显示但无法做到

这是一个fiddle

代码是这样的

HTML

  1. <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>
  2.  
  3. <div data-role="popup" id="sql" data-dismissible="false" style="max-width:100%">
  4. <div data-role="header" data-theme="a">
  5. <h1>Delete Page?</h1>
  6.  
  7. </div>
  8. <div role="main" class="ui-content">
  9. <h3 class="ui-title">Are you sure you want to delete this page?</h3>
  10.  
  11. <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>
  12. <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">Delete</a>
  13.  
  14. </div>
  15. </div>
  16. </div>

谢谢&问候

解决方法

> CSS解决方案:

这将适用于任何弹出窗口.

  1. .ui-popup-container,.ui-popup {
  2. height: 98%;
  3. width: 100%;
  4. position: absolute;
  5. top: 0;
  6. left:0;
  7. }

> JS解决方案:

定位特定弹出窗口.

  1. $(document).on("pagecreate","#pageID",function () {
  2. $("#sql").popup({
  3. beforeposition: function () {
  4. $(this).css({
  5. width: window.innerWidth,height: window.innerHeight - 14
  6. });
  7. },x: 0,y: 0
  8. });
  9. });

07000

猜你在找的jQuery相关文章