如何使一個jQuery Mobile的彈出出現在設備的全屏幕

我一直在努力做一個彈出出現在JQM全屏幕，但不能夠做到這一點如何使一個jQuery Mobile的彈出出現在設備的全屏幕

這裏是一個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>

感謝&問候

來源

2014-06-26 Vikram

檢查此http://jsfiddle.net/N2UYZ/1/ – Aravin

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 
    }); 
});

Demo

來源

2014-06-26 10:26:50 Omar

不錯的一個....... – Aravin

爲了避免15像素的默認的jQuery移動填充爲彈出窗口和彈出寬度設定爲100％，而不是寫硬編碼值，您可以執行以下操作：

HTML：

<div data-role="popup" id="sql" data-dismissible="false" data-tolerance="0">

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

來源

2014-10-28 23:33:55

此代碼添加一個新的方法 '的setText' 在jquery的源代碼中定義的微件mobile.popup。使用它來更改彈出內容。彈出窗口將自動對中窗口

<div data-role="popup" id="popup-info" data-theme="b" class="ui-content" > 
    <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-left">Fermer</a> 
    <div id="content"></div> 
</div>  

<script> 
(function($) { 
    $.widget("mobile.popup", $.mobile.popup, { 
     setText: function(_text) { 
      container=this.element.find('div:first'); 
      if(container!==undefined){ 
       container.html(_text); 
      }else{ 
       this.element.html(_text); 
      } 
      var newX = parseInt(($(window).width()-this._ui.container.width())/2);  
      var newY = parseInt(($(window).height()-this._ui.container.height())/2);   
      this.reposition({x:newX,y:newY,positionTo:'window'} ); 
     } 
    });  
})(jQuery); 

$('#popup-info').popup('setText',str); 
</script>

來源

2016-05-26 08:50:57

如何使一個jQuery Mobile的彈出出現在設備的全屏幕

回答

相關問題